Grid menata elemen dalam baris dan kolom sekaligus sehingga cocok untuk layout halaman dan galeri kartu. Section ini membahas definisi track, unit fr, penamaan area, penempatan otomatis, hingga subgrid dan pola layout grid yang sering dipakai.

# Grid Container dan Grid Items

Kenali dua peran utama dalam CSS Grid: container yang membentuk kisi dan item yang mengisinya, termasuk baris implicit yang terbentuk otomatis.

Buka → # Grid Template Columns dan Rows

Tentukan struktur kisi secara eksplisit dengan grid-template-columns dan grid-template-rows, serta pahami batas antara track eksplisit dan implicit.

Buka → # Fr Unit

Gunakan satuan fr untuk mendistribusikan ruang bebas grid secara proporsional dan pahami urutan perhitungannya.

Buka → # Repeat dan Minmax

Reringkas daftar track dengan repeat() dan kendalikan batas ukuran track dengan minmax(), termasuk pola auto-fill yang responsif.

Buka → # Grid Lines dan Grid Areas

Tempatkan item secara presisi menggunakan nomor grid line, nama garis, serta grid-template-areas dengan grid-area.

Buka → # Auto Placement

Pahami algoritma penempatan otomatis grid: urutan pengisian sel, grid-auto-flow, serta perbedaan mode sparse dan dense.

Buka → # Auto-fit dan Auto-fill

Bandingkan kata kunci auto-fill dan auto-fit pada repeat() dan pelajari kapan track kosong dipertahankan atau di-collapse.

Buka → # Alignment dan Gap

Atur perataan item dan track pada dua sumbu dengan justify-items, align-items, justify-content, dan align-content, serta beri jarak lewat gap.

Buka → # Subgrid

Warisi track grid induk ke dalam grid anak dengan subgrid agar baris antar kartu sejajar sempurna.

Buka → # Grid Layout Patterns

Terapkan resep grid yang teruji: holy grail dua belas kolom, galeri kartu responsif, dan dashboard dengan area bernama.

Buka →