Generator CSS Grid

Tentang alat ini

CSS Grid Generator adalah alat gratis berbasis browser yang mengubah tiga kontrol sederhana — jumlah kolom, jumlah baris, dan gap — menjadi tata letak grid CSS yang siap ditempel. Atur nilainya, saksikan pratinjau langsung tergambar ulang, dan salin aturan yang dihasilkan.

Kolom dan baris berupa bilangan bulat dari 1 hingga 12 (default 3 dan 2), dan gap berupa slider dari 0 hingga 40 piksel (default 10). Kedua dimensi ditulis dengan repeat() dan unit 1fr, jadi setiap track berbagi ruang yang tersedia secara merata. Pratinjau mengisi setiap sel dengan blok bernomor dan berwarna sehingga Anda dapat melihat struktur track sekilas, dan keluarannya adalah aturan .grid biasa yang menggunakan display: grid, grid-template-columns, grid-template-rows, dan gap. Satu klik menyalinnya ke papan klip Anda.

Semuanya berjalan sepenuhnya di browser Anda — tanpa unggahan, tanpa akun, tanpa pelacakan — dan tetap bekerja offline setelah halaman dimuat.

Pertanyaan yang sering diajukan

Bagaimana track diukur?

Baik kolom maupun baris ditulis dengan repeat() dan unit 1fr, jadi semua track berbagi ruang yang tersedia secara merata.

Apa yang dilakukan kontrol gap?

Kontrol ini mengatur gap grid dalam piksel di antara setiap sel, dari 0 hingga 40, dan berlaku secara langsung pada pratinjau maupun CSS yang dihasilkan.

Kisaran apa yang diizinkan kontrol?

Kolom dan baris menerima bilangan bulat dari 1 hingga 12; slider gap berkisar dari 0 hingga 40 piksel. Entri di luar kisaran atau non-numerik dibatasi, kembali ke default 3 kolom, 2 baris, dan gap 10px.

CSS apa yang dihasilkannya?

Aturan .grid dengan display: grid, grid-template-columns dan grid-template-rows yang masing-masing diatur dengan repeat() dan 1fr, serta gap dalam piksel. Tombol Salin menempatkan aturan persis itu ke papan klip Anda.

Tentang alat ini

Pertanyaan yang sering diajukan

Alat lainnya