Saat membangun Aplikasi Web, salah satu hal pertama yang dibutuhkan adalah cara untuk menata letak konten aplikasi Anda.
Banyak desainer menggunakan petak imajiner untuk menata letak konten, baik untuk situs atau aplikasi. Kelompok CSS telah berupaya keras untuk mempermudah tata letak, dan sebagai bagian dari itu, telah menghasilkan Modul Tata Letak Petak CSS yang kini mulai berkembang di browser.
Fitur ini tersedia untuk dicoba di Chrome di belakang tanda eksperimental. Kebijakan ini juga diterapkan di IE sejak versi 10, dan kemungkinan akan segera diterapkan di sebagian besar browser.
Ringkasan eksekutif
- Tata Letak Petak CSS memungkinkan Anda menentukan baris dan kolom untuk tata letak Anda
- {i>Grid<i} dapat beradaptasi untuk memanfaatkan ruang yang tersedia
- Urutan konten dapat terpisah dari urutan tampilan penampung petak
- Tata letak dapat berubah berdasarkan kueri media, sehingga desain responsif menjadi lebih mudah
- Konten dapat tumpang tindih (mengaktifkan tata letak yang tidak mungkin dilakukan dengan metode lain)
- Tata Letak Petak cepat
Berikut video ringkasan yang menjelaskan banyak hal tentang cara kerja Tata Letak Petak CSS (slide ada di sini:
Cobalah
Menggunakan Tata Letak Petak CSS di Chrome kini mudah dilakukan. Hal pertama yang perlu Anda lakukan adalah mengaktifkan tanda eksperimental untuk mengaktifkan fitur tersebut.
Pertama-tama, muat URL chrome://flags dan scroll ke bawah ke opsi untuk Mengaktifkan fitur Platform Web eksperimental seperti yang ditunjukkan di bawah:
Cukup klik Aktifkan untuk mengaktifkan tanda, dan Anda akan melihat perintah untuk memulai ulang browser yang terlihat seperti ini:
Sekarang, cukup klik tombol Luncurkan Ulang Sekarang untuk memulai ulang browser dan Anda akan siap untuk mencoba Tata Letak Petak CSS.
Beri tahu kami pendapat Anda
Tata Letak Petak CSS adalah primitif baru yang hebat untuk konten web, tetapi seperti biasa, kita semua ingin mendengar pendapat developer tentang hal itu. Ada banyak cara untuk memberikan masukan - tulis komentar di sini, kirim email ke daftar W3C CSS Working Group dengan subjek "[css-grid]" di baris subjek, catat bug, atau tulis blog dan tweet pendapat Anda. Kami menantikan tata letak hebat yang Anda buat dengan fitur baru yang sangat berguna ini.