Generator CSS Grid
Bangun tata letak grid CSS secara visual.
Prasetel tata letak (10)
Seret melintasi sel untuk membuat persegi panjang, atau klik satu sel setiap kali. Setiap area bernama harus tetap berbentuk persegi panjang.
Pratinjau langsung
Satu dimensi: Generator CSS Flexbox.
Bangun grid CSS dengan area bernama
Lukis kisi huruf untuk area template, atau pilih preset. Pratinjau menampilkan setiap wilayah dengan warna berbeda.
FAQ
Apa itu grid-template-areas?
Cara untuk menamai area tata letak (header, sidebar, main…) dan menempatkan item berdasarkan nama, bukan nomor garis grid. Klik sel di bawah untuk mewarnai huruf area — CSS diperbarui secara langsung.
Bisakah saya memulai dari preset?
Ya — sepuluh preset tata letak, termasuk Holy grail, dashboard, magazine, dan app shell, memuat area bernama dengan sekali klik.
Apakah ada yang diunggah?
Tidak. CSS dibuat sepenuhnya di browser Anda.
Terakhir diperbarui: