Generator CSS Grid
Pratinjau Real-time
Mengapa menggunakan generator CSS Grid visual?
CSS Grid adalah sistem layout paling kuat dalam CSS namun sintaksnya memiliki kurva pembelajaran yang curam. Dengan generator visual kami, Anda dapat menyesuaikan grid menggunakan slider dan dropdown dan langsung melihat dampak setiap properti.
Pratinjau Grid Real-time
Grid diperbarui secara real-time saat Anda menyesuaikan kolom, baris, gap, dan penyelarasan
Dukungan Unit fr
Template menggunakan unit fr (fraksi) untuk grid fleksibel yang beradaptasi dengan ukuran container
CSS Siap Pakai
Ekspor blok .container CSS yang bersih dengan grid-template-columns, rows, gap, dan align-items
Buat layout CSS Grid
Konfigurasikan kolom dan baris
Atur jumlah kolom dan baris grid menggunakan slider
Pilih template dan gap
Pilih template kolom (sama rata, tetap+fleksibel, atau minmax responsif) dan atur gap
Salin CSS
Klik 'Salin CSS' untuk mendapatkan blok CSS lengkap yang siap ditempel ke stylesheet
Kasus Penggunaan CSS Grid
Layout Halaman
Buat struktur header/sidebar/konten utama/footer dengan named grid areas
Dashboard
Buat layout dashboard kompleks dengan kartu berbeda ukuran menggunakan grid-column dan grid-row span
Galeri
Buat galeri bergaya masonry atau beraturan yang beradaptasi dengan auto-fill dan minmax
Layout Majalah
Buat layout editorial dengan kolom tidak sama dan konten unggulan yang merentang beberapa sel
Praktik Terbaik CSS Grid
✓ Prioritaskan unit fr daripada persentase
Unit fr (fraksi) membagi ruang yang tersedia setelah kolom tetap tanpa perhitungan manual.
✓ Gunakan minmax() untuk grid responsif
repeat(auto-fill, minmax(250px, 1fr)) membuat grid responsif yang secara otomatis menyesuaikan jumlah kolom.
✓ Gunakan named grid areas
grid-template-areas dengan sel bernama membuat layout halaman mudah dibaca dan dimodifikasi.
✓ Pahami auto-fill vs. auto-fit
auto-fill membuat jumlah track maksimum (termasuk yang kosong). auto-fit mengkompres track kosong dan memperluas yang ada — biasanya optimal untuk grid kartu.
❓ Pertanyaan yang Sering Diajukan
Apa itu unit fr dalam CSS Grid?
fr adalah singkatan dari 'fractional unit'. 1fr mewakili sepotong ruang kosong yang tersedia dalam container grid. repeat(3, 1fr) membuat 3 kolom yang membagi ruang yang tersedia secara merata.
Apa perbedaan antara CSS Grid dan Flexbox?
Flexbox adalah satu dimensi — menempatkan item di sepanjang satu sumbu (baris atau kolom). CSS Grid adalah dua dimensi — dapat mengontrol baris dan kolom secara bersamaan, jauh lebih kuat untuk layout halaman.
Apa yang dilakukan minmax()?
minmax(min, max) menentukan rentang ukuran untuk track grid. minmax(200px, 1fr) berarti kolom minimal 200px lebar namun dapat tumbuh untuk mengisi ruang yang tersedia.
Kapan menggunakan CSS Grid daripada Flexbox?
Gunakan Grid untuk layout dua dimensi di mana Anda mengontrol baris dan kolom secara bersamaan. Gunakan Flexbox untuk layout satu dimensi komponen seperti navbar.