Implicit dan Explicit Grid

Setiap grid yang kita tulis sejauh ini sebenarnya memiliki dua lapisan struktur. Lapisan pertama adalah explicit grid: baris dan kolom yang kita definisikan sendiri lewat grid-template-columns dan grid-template-rows. Lapisan kedua adalah implicit grid: track tambahan yang dibuat browser secara otomatis ketika jumlah item melebihi jumlah sel, atau ketika item ditempatkan melewati batas denah. Browser tidak membiarkan item tanpa tempat — ia menyediakan track baru — dan pada chapter ini kita belajar mengatur ukuran serta arah pengisian track tersebut.

Track Explicit: yang Kita Definisikan #

Deklarasi berikut membuat grid dengan enam sel eksplisit:

css
.papan-pin {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 120px);
}

Tiga kolom dikali dua baris menghasilkan enam sel. Selama isinya maksimal enam item, semuanya berjalan sesuai denah. Pertanyaannya: apa yang terjadi pada item ketujuh?

Track Implicit dan grid-auto-rows #

Browser menjawab dengan membuat baris ketiga di luar denah. Baris semacam itu disebut baris implicit, dan ukurannya diatur oleh grid-auto-rows:

css
.papan-pin {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 120px);
  grid-auto-rows: 90px;
}

Demo berikut menaruh tujuh item pada grid enam sel — item ketujuh diberi garis putus-putus agar baris implicit mudah dikenali:

Nilai awal grid-auto-rows adalah auto, artinya tinggi baris implicit mengikuti kontennya. Akibat yang sering muncul: baris tambahan tampak tidak rata karena tingginya berbeda-beda; menuliskan grid-auto-rows menyamakannya. Pasangannya, grid-auto-columns, mengatur lebar kolom implicit — kolom semacam ini muncul ketika item ditempatkan melewati kolom denah atau ketika pengisian mengarah ke samping.

grid-auto-flow: Arah Pengisian #

Property grid-auto-flow mengatur bagaimana browser menyusun item yang tidak diberi penempatan eksplisit:

Nilai	Perilaku
`row` (nilai awal)	Mengisi tiap baris dari kiri ke kanan, lalu pindah ke baris berikutnya
`column`	Mengisi tiap kolom dari atas ke bawah, lalu pindah ke kolom sebelah kanan
`row dense`	Seperti `row`, tetapi algoritma kembali ke belakang untuk mengisi lubang
`column dense`	Versi kolom dari `dense`

Mode dense berguna untuk konten campuran. Ketika satu item membentang lebar dan menciptakan lubang di barisnya, dense mengizinkan item kecil yang datang belakangan untuk mundur dan mengisi lubang tersebut — papan pin jadi padat tanpa celah. Harga yang dibayar: urutan visual bisa melompati urutan sumber. Untuk galeri gambar hal ini tak masalah, tetapi pada daftar interaktif yang dinavigasi keyboard, perbedaan urutan visual dan urutan fokus bisa membingungkan. Gunakan dense hanya ketika urutan tampilan tidak membawa makna.

Kesalahan Umum #

Kesalahan	Akibatnya	Perbaikannya
Lupa menulis `grid-auto-rows`	Baris implicit tingginya mengikuti konten, deretan tampak tidak rata	Tentukan tingginya, misal `grid-auto-rows: 90px`
Memakai `dense` pada daftar berurutan	Urutan fokus keyboard tidak sesuai urutan visual	Simpan `dense` untuk galeri tanpa urutan bermakna
Mengira `grid-auto-flow` mengubah jumlah kolom	Property ini hanya mengubah arah pengisian	Atur jumlah kolom lewat `grid-template-columns`

Ringkasan #

Explicit grid adalah denah yang kita tulis; implicit grid adalah track cadangan yang dibuat browser saat item melebihi denah. grid-auto-rows dan grid-auto-columns mengatur ukuran track cadangan, sedangkan grid-auto-flow — termasuk mode dense — mengatur arah dan kepadatan pengisian. Dengan pemahaman ini kita siap naik satu tingkat: chapter berikutnya menempatkan grid container sebagai item dari grid lain.