Materi
Flexbox menata satu sumbu. Grid menata dua sumbu sekaligus: kamu menentukan kolom dan baris, lalu isi menempati selnya. Satuan fr mewakili satu bagian dari sisa ruang di dalam grid container, jadi tiga kolom 1fr berarti sisa ruang dibagi rata menjadi tiga.
.galeri {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}Penulisan repeat(3, 1fr) adalah bentuk singkat dari 1fr 1fr 1fr. Fungsi repeat() menerima jumlah pengulangan dan daftar ukuran yang diulang, sehingga repeat(2, 120px 1fr) sama dengan 120px 1fr 120px 1fr.
Kolom ditulis di grid-template-columns dan baris di grid-template-rows. Kalau jumlah item melebihi sel yang kamu tulis, grid membuat baris tambahan sendiri — baris implisit — yang tingginya mengikuti isi. Enam kartu di dalam grid tiga kolom menempati dua baris tanpa kamu menuliskan satu pun baris.
Contoh di luar latihan: jadwal dengan kolom jam selebar 120 piksel dan kolom kegiatan yang mengisi sisanya ditulis grid-template-columns: 120px 1fr. Ukuran tetap dihitung lebih dulu bersama gap, lalu sisa ruang dibagikan ke kolom ber-fr. Karena itu 1fr di grid selebar 900px dengan satu kolom 300px bernilai 300px, bukan 450px.
