Panduan Grid

CSS Grid bekerja pada dua dimensi sekaligus: baris dan kolom. Karena itu, jumlah property dan nilainya lebih banyak daripada flexbox, dan referensi yang baik jauh lebih berharga. Chapter ini menghimpun panduan Grid yang paling berguna, lalu menutupnya dengan kebiasaan membaca tabel grid yang menyelamatkan waktu saat layout tidak sesuai rencana.

Empat Referensi Grid Utama #

CSS-Tricks sangat membantu untuk pemetaan cepat karena membagi tabelnya menjadi property untuk induk (grid-template-columns, gap) dan property untuk anak (grid-column, grid-area). Grid Garden melengkapi sisi keterampilan motorik: mengetik nilai kolom yang benar berkali-kali membuat pola seperti 1fr 2fr 1fr melekat dengan sendirinya.

Ketika kembali ke Grid setelah beberapa minggu, dua nilai yang paling sering dicari ulang adalah minmax() dan kombinasi repeat() dengan auto-fit. Nilai minmax(200px, 1fr) menjaga kolom tetap lega tanpa menyusut di bawah 200 piksel, sedangkan repeat(auto-fit, minmax(200px, 1fr)) membentuk kolom sebanyak mungkin yang muat dalam wadah.

Kebiasaan Membaca Grid yang Menghemat Waktu #

Sebagian besar kebingungan Grid berawal dari satu hal: penghitungan garis, bukan kotak. Ingat tiga aturan berikut setiap kali membaca referensi:

1. Garis pertama bernomor 1, bukan 0; item ditempatkan di antara garis.
2. grid-column: 2 / 4 berarti item membentang dari garis 2 hingga garis 4, sehingga lebarnya dua kolom.
3. Kata kunci span lebih mudah dibaca: grid-row: span 2 membentang dua baris tanpa menghitung nomor.

/* Layout galeri tiga kolom dengan item unggulan selebar dua kolom */
.galeri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.galeri .kartu-unggulan {
  grid-column: span 2;
}

Demo berikut membentuk galeri yang sama dengan empat kartu:

Bila layout masih tidak terbentuk, periksa tiga hal ini dulu: elemen induk sudah memakai display: grid, grid-template-columns benar-benar ditulis pada induk (bukan pada anak), dan penempatan grid-column tidak bertumpuk dengan item lain pada sel yang sama.

Kapan Memilih Grid atau Flexbox #

Referensi resmi keduanya saling melengkapi dengan aturan praktis yang konsisten:

Keduanya bukan pilihan yang saling menggantikan. Pada proyek nyata, Grid biasanya mengatur kerangka halaman, lalu flexbox mengatur isi tiap area seperti baris tombol atau header kartu. Referensi di atas akan kamu butuhkan bergantian sepanjang karier menulis CSS.

Ringkasan #

MDN dan web.dev memberikan fondasi konsep Grid, CSS-Tricks menjadi peta property tercepat, dan Grid Garden mengubah penghitungan garis menjadi kebiasaan. Dengan tiga aturan garis di atas, sebagian besar nilai seperti 2 / 4 tidak lagi perlu ditebak. Berikutnya kita naik satu tingkat: merangkai layout agar menyesuaikan diri pada semua ukuran layar melalui responsive design.