Generator CSS Grid

Kontainer yang dihasilkan

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;

@media (max-width: 660px) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

• repeat(3, minmax(0, 1fr)): tiga kolom yang berbagi lebar tersedia secara merata. 1fr adalah satu bagian dari ruang yang tersisa; minmax(0, 1fr) memungkinkan kolom menyusut di bawah ukuran isinya.
• gap: jarak antartrack.
• Media query beralih ke repeat(auto-fit, minmax(220px, 1fr)), yang membuat kolom sebanyak yang muat, masing-masing setidaknya selebar 220px. Titik putus adalah jumlah kolom dikali lebar minimum (dengan batas bawah 120px), jadi di layar kecil grid turun ke baris baru alih-alih terhimpit.

Satuan fr

fr berarti “satu bagian dari ruang yang tersisa”: setelah track berukuran tetap dikurangi, ruang yang tersisa dibagi dengan jumlah total satuan fr.

grid-template-columns: 200px 1fr 2fr;

Pada kontainer 1000px, kolom pertama mengambil 200px dan 800px sisanya terbagi 1:2, jadi 267px dan 533px.

auto-fill vs. auto-fit

• auto-fill: membuat track kosong pengisi saat elemen tidak cukup banyak.
• auto-fit: meruntuhkan track kosong menjadi nol, sehingga elemen yang tersisa meregang memenuhi baris.

Fallback responsif memakai auto-fit, persis yang diinginkan grid kartu: barisnya selalu tampak penuh.

Kolom dengan lebar berbeda

Generator menghasilkan kolom sama rata. Ubah hasilnya untuk mencampur ukuran: grid-template-columns: 200px 1fr 2fr; memberi sidebar tetap dan dua kolom fleksibel dengan rasio 1:2. Untuk area bernama (grid-template-areas) atau penempatan eksplisit (grid-column: 1 / 3), tambahkan aturan itu secara manual di atas kontainer yang dihasilkan.

Grid vs. Flexbox

• Grid: tata letak 2D eksplisit dengan track. Cocok saat tata letak punya struktur baris dan kolom (kerangka halaman, galeri, dasbor).
• Flexbox: penjajaran 1D di sepanjang satu sumbu. Cocok saat elemen mengalir secara alami (bar navigasi, deretan tombol).

Tata letak sungguhan biasanya memadukan keduanya: Grid untuk kerangka halaman, Flexbox di dalam komponen.

Jebakan umum

• Lupa min-width: 0 pada elemen anak: elemen grid secara bawaan memakai lebar minimum isinya, yang membuat kolom fr tidak bisa menyusut di bawah kata terpanjang. Beri min-width: 0 pada anak agar bisa menyusut.
• Bersarang tanpa display: grid: anak grid bukanlah grid juga sampai Anda mendeklarasikannya.