Masuk ke Petak CSS

Alex Danilo

Saat mem-build Aplikasi Web, salah satu hal pertama yang diperlukan adalah cara untuk menata konten aplikasi Anda.

Banyak desainer menggunakan petak imajiner untuk menata konten, baik untuk situs maupun aplikasi. Grup CSS telah bekerja keras untuk mempermudah tata letak, dan sebagai bagian dari upaya tersebut, mereka telah menghasilkan Modul Tata Letak Petak CSS yang kini muncul di browser.

Fitur ini tersedia untuk dicoba di Chrome dengan tanda eksperimental. Fitur ini juga diterapkan di IE sejak versi 10, dan kemungkinan akan segera tersedia di sebagian besar browser.

Ringkasan eksekutif

  • Tata Letak Petak CSS memungkinkan Anda menentukan baris dan kolom untuk tata letak
  • Petak dapat beradaptasi untuk memanfaatkan ruang yang tersedia
  • Urutan konten dapat independen dari urutan tampilan penampung petak
  • Tata letak dapat berubah berdasarkan kueri media, sehingga mempermudah desain responsif
  • Konten dapat tumpang-tindih (memungkinkan tata letak yang tidak mungkin dengan metode lain)
  • Tata Letak Petak cepat

Berikut adalah video ringkasan yang menjelaskan banyak hal tentang cara kerja Tata Letak Petak CSS (slidenya ada di sini:

Cobalah

Menggunakan Tata Letak Petak CSS di Chrome kini mudah. Hal pertama yang perlu Anda lakukan adalah mengaktifkan tanda eksperimental untuk mengaktifkan fitur ini.

Pertama, muat URL chrome://flags, lalu scroll ke bawah ke opsi untuk Mengaktifkan fitur Platform Web eksperimental seperti yang ditunjukkan di bawah:

Gambar opsi tanda eksperimental

Cukup klik Aktifkan untuk mengaktifkan tanda, dan Anda akan melihat perintah untuk memulai ulang browser yang terlihat seperti ini:

Gambar tombol Luncurkan ulang

Sekarang, cukup klik tombol Luncurkan Ulang Sekarang untuk memulai ulang browser dan Anda siap untuk mencoba Tata Letak Petak CSS.

Beri tahu kami pendapat Anda

Tata Letak Petak CSS adalah primitif baru yang bagus untuk konten web, tetapi seperti biasa, kami ingin mendengar pendapat developer tentang hal ini. Ada banyak cara untuk memberikan masukan - tinggalkan komentar di sini, kirim email ke daftar Grup Kerja CSS W3C dengan "[css-grid]" di baris subjek, catat bug, atau tulis di blog dan tweet pendapat Anda tentangnya. Kami menantikan tata letak keren yang Anda buat dengan fitur baru yang sangat berguna ini.