Masuk ke Petak CSS

Alex Danilo

Saat membangun Aplikasi Web, salah satu hal pertama yang diperlukan adalah cara untuk membuat tata letak konten aplikasi Anda.

Banyak desainer menggunakan petak imajiner untuk menata konten, baik untuk situs atau aplikasi. Kelompok CSS telah bekerja keras untuk membuat tata letak lebih mudah, dan sebagai bagian dari itu telah menghasilkan Modul Tata Letak Petak CSS yang kini muncul di browser.

Fitur ini tersedia untuk dicoba di Chrome di balik tanda eksperimental. Ini juga diterapkan di IE sejak versi 10, dan kemungkinan besar akan segera hadir di sebagian besar {i>browser<i}.

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 terpisah dari urutan tampilan penampung petak
  • Tata letak dapat berubah berdasarkan kueri media, sehingga membuat desain responsif menjadi lebih mudah
  • Konten dapat tumpang tindih (mengaktifkan tata letak yang tidak mungkin dilakukan dengan metode lain)
  • Tata Letak Petak cepat

Berikut adalah video ringkasan yang menjelaskan banyak hal tentang cara kerja Tata Letak Petak CSS (slide 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 tersebut.

Pertama, muat URL chrome://flags dan scroll ke bawah ke opsi Enable eksperimental Web Platform features seperti yang ditunjukkan di bawah:

Gambar opsi tanda eksperimental

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

Gambar tombol Luncurkan kembali

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 semua ingin mendengar pendapat developer tentang hal tersebut. Ada banyak cara untuk memberikan masukan - tinggalkan komentar di sini, kirim email ke daftar W3C CSS Working Group dengan menyertakan "[css-grid]" pada baris subjek, log bug, atau blog dan tweet tentang pendapat Anda. Kami menantikan tata letak hebat yang Anda buat dengan fitur baru yang sangat berguna ini.