CSS Grid menata elemen dalam baris dan kolom sekaligus, kayak kotak-kotak di papan catur. Kamu cukup bilang berapa kolomnya dan selebar apa, lalu anak-anak elemen itu (disebut item) otomatis mengisi kotaknya dari kiri ke kanan, baris demi baris. Elemen pembungkusnya disebut grid container.
🧪 Tebakan cepat:
grid-template-columns: 1fr 2frbikin dua kolom. Mana yang lebih lebar, dan berapa kali? Tebak dulu, jawabannya ada di bagian "Satuan fr: bagian dari sisa ruang".
Tiga kolom sama lebar
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
display: gridmengubah.gridjadi grid container. Anak-anaknya ditata dalam kotak-kotak.grid-template-columnsmenentukan kolomnya: berapa banyak dan selebar apa.repeat(3, 1fr)artinya "tiga kolom, masing-masing1fr", sama saja dengan menulis1fr 1fr 1fr.gap: 16pxmemberi celah 16px di antara kolom dan di antara baris.
Hasilnya, enam item tersusun jadi dua baris: 1, 2, 3 di atas, 4, 5, 6 di bawah, sama lebar, dipisah celah 16px. Begitu satu baris penuh, grid otomatis bikin baris baru. Mau mengatur tinggi baris juga? Propertinya grid-template-rows, cara nulisnya sama.
Satuan fr: bagian dari sisa ruang
fr singkatan dari fraction, artinya pecahan. Ruang yang tersisa sesudah dipotong celah dibagi jadi beberapa bagian, dan tiap kolom dapat sebanyak angkanya.
.layout {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 16px;
}
Ruangnya dibagi tiga bagian: kolom pertama dapat 1, kolom kedua dapat 2. Jadi kolom kanan dua kali lebih lebar dari kolom kiri. Itu jawaban tebakannya. Cocok buat sidebar sempit dan konten lebar.
Satuan bisa dicampur. grid-template-columns: 250px 1fr bikin kolom kiri tetap 250px, kolom kanan mengambil semua sisanya.
⚠️ Jebakan yang sering ketemu
- Lupa
display: grid. Tanpa itu,grid-template-columnsgak berefek apa-apa. - Menulis kolom di item.
grid-template-columnsdangapditulis di container, bukan di kotak-kotak di dalamnya. - Kolom pakai
%plusgap.repeat(4, 25%)sudah 100%. Ditambah celah, totalnya lebih lebar dari container, jadi grid-nya meluber ke kanan.frmenghitung celah lebih dulu, jadi selalu pas. - Kolom dan baris tertukar.
grid-template-columnsmengatur kolom (ke samping),grid-template-rowsmengatur baris (ke bawah).
💡 Flexbox atau Grid? Flexbox menata satu arah, misalnya deretan tombol di menu. Grid menata baris dan kolom sekaligus, misalnya layout halaman atau galeri kartu. Sering dipakai bareng: Grid buat kerangka halaman, Flexbox di dalam tiap kotaknya.
🔬 Coba sendiri
Ubah jumlah kolom, ukurannya, dan celahnya, lalu lihat kotak-kotaknya menyusun ulang.
TL;DR: display: grid di container menyalakan Grid. grid-template-columns menentukan kolom: repeat(3, 1fr) sama dengan 1fr 1fr 1fr, tiga kolom sama lebar. fr adalah satu bagian dari sisa ruang, jadi 1fr 2fr bikin kolom kedua dua kali lebar kolom pertama. gap memberi celah antar kolom dan baris. Item mengisi kotak dari kiri ke kanan, lalu turun ke baris berikutnya.
