Coba buka koran cetak. Liat tata letaknya: header gede di atas, di bawah ada beberapa kolom artikel, kadang ada gambar yang merentang 2 kolom, sidebar iklan di pinggir. Semua itu disusun di "grid" raksasa yang udah dirancang editor sebelum konten ditulis. CSS Grid kasih kekuatan editor koran itu ke kamu di web — sistem layout 2 dimensi (baris × kolom) yang bisa nyusun halaman kompleks dengan presisi yang dulu cuma bisa dibayangin.

💡 Flexbox vs Grid — kapan pakai apa? Flexbox = 1 dimensi (deretan tombol, navigasi, list horizontal). Grid = 2 dimensi (layout halaman, dashboard, gallery card kompleks). Sering pas di proyek nyata: Grid buat layout halaman utama, Flexbox di dalam tiap cell-nya buat susunan internal.

Untuk mengaktifkan Grid, tambahkan display: grid pada container:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px;
  gap: 16px;
}

grid-template-columns — mendefinisikan jumlah dan lebar kolom:

/* 3 kolom masing-masing 200px */
grid-template-columns: 200px 200px 200px;

/* 3 kolom sama rata */
grid-template-columns: 1fr 1fr 1fr;

/* Shorthand dengan repeat */
grid-template-columns: repeat(3, 1fr);

/* Kolom responsif otomatis */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

Satuan fr (fraction) membagi ruang yang tersedia secara proporsional:

/* Sidebar 250px, konten mengisi sisa */
grid-template-columns: 250px 1fr;

/* 1:2:1 ratio */
grid-template-columns: 1fr 2fr 1fr;

gap — jarak antar sel grid:

gap: 16px;            /* Baris dan kolom sama */
row-gap: 20px;        /* Jarak antar baris */
column-gap: 10px;     /* Jarak antar kolom */

🎭 Analogi sehari-hari

Grid = denah catur dengan kotak baris × kolom. Beda flexbox (1D = orang antri) vs grid (2D = papan catur dengan posisi presisi). 1fr = satu bagian dari kue yang dibagi rata. repeat(auto-fit, minmax(200px, 1fr)) = "bagi sebanyak yang muat, masing-masing minimum 200px, sebar sisa ruang".

⚠️ Jebakan yang sering ditemui

• fr vs % — 1fr membagi sisa ruang setelah konten + gap dihitung. 100% literal lebar parent → bisa overflow kalau ada gap. Pakai fr.
• auto-fill vs auto-fit — keduanya mirip, tapi: auto-fill mempertahankan kolom kosong; auto-fit mengempiskan kolom kosong sehingga item yang ada melebar mengisi. Pilih auto-fit untuk grid responsif card.
• Implicit grid muncul tanpa diminta — kalau ada item lebih banyak dari kolom × baris yang dideklarasi, grid otomatis bikin baris baru pakai grid-auto-rows. Kalau hasilnya aneh, set grid-auto-rows: minmax(100px, auto).
• grid-template-columns: repeat(3, 1fr) + item tinggi beda — semua kolom jadi tinggi terbesar item di baris itu (default align-items: stretch). Tambahkan align-items: start kalau tidak mau.
• min-content overflow — kalau item berisi gambar besar / teks tanpa wrap, kolom 1fr bisa melebihi track. Fix: grid-template-columns: minmax(0, 1fr).

TL;DR: Grid = sistem layout 2D (baris × kolom). Set display: grid di parent, definisikan kolom via grid-template-columns: 1fr 2fr 1fr (proporsional) atau repeat(auto-fit, minmax(200px, 1fr)) (responsif otomatis). Satuan fr = bagian dari sisa ruang. gap ngatur jarak antar cell. Grid > Flexbox kalau butuh kontrol baris dan kolom barengan.