Generator CSS Grid — Layout Grid Tingkat Lanjut

CSS Grid adalah alat CSS terbaik untuk membuat layout dua dimensi yang kompleks. Generator Grid memungkinkan perancangan layout secara visual tanpa menulis kode secara manual.

Konsep Utama CSS Grid

• grid-template-columns/rows — definisikan track grid
• fr — satuan fraksi (1fr = 1 bagian dari ruang yang tersedia)
• grid-column/row — penempatan elemen dalam grid
• grid-template-areas — area bernama untuk layout yang mudah dibaca
• gap — jarak antara sel

Grid vs Flexbox

Flexbox = 1D (baris atau kolom). Grid = 2D (baris dan kolom sekaligus). Gunakan Grid untuk layout seluruh halaman, Flexbox untuk komponen UI.