📐 CSS Grid Generator — Layout Grid Visual
Buat layout CSS Grid secara visual. Atur jumlah kolom & baris, gap, alignment, dan ukuran. Generate kode CSS grid siap pakai dengan live preview interaktif.
🎯 Visual🆓 Gratis🚫 Tanpa Login📋 Copy CSS🔒 100% Privat
💡 CSS Grid: sistem layout 2-dimensi paling powerful di CSS.
grid-template-columns: repeat(3, 1fr) = 3 kolom sama lebar. Cocok untuk layout halaman, card grid, dashboard, dan galeri. Tools ini membantu visualisasi sebelum coding.CSS:
📖 Cara Menggunakan CSS Grid Generator
1
Atur Kolom & Baris
Jumlah kolom dan baris — langsung terlihat di preview.
2
Atur Gap
Column gap dan row gap — jarak antar cell.
3
Pilih Column Size
Equal (1fr), auto-fit, fixed, atau minmax.
4
Salin CSS
Copy kode CSS grid siap pakai.
💡 Tips CSS Grid
🎯 fr Unit
1fr = 1 fraksi ruang tersisa. repeat(3, 1fr) = 3 kolom sama lebar. Lebih fleksibel dari persen.
📊 Auto-fit vs Auto-fill
Auto-fit: kolom collapse jika kosong. Auto-fill: kolom tetap ada meski kosong.
🔗 Coba Juga Tools Lain
Tools ini cocok dipadukan dengan kalkulator lainnya:
🔗 Alat Terkait yang Mungkin Anda Butuhkan
🕐 Terakhir diperbarui: 30 Mei 2026 · Dibuat oleh dwik.xyz · Syarat & Ketentuan