Penghasil CSS Grid
CSS Grid Generator membuat layout grid dari jumlah kolom dan baris, gap, nilai grid-template kustom (opsional), dan perataan item, dengan pratinjau langsung dan CSS siap salin.
Tentang alat ini
CSS Grid Generator membuat layout grid dari jumlah kolom dan baris, gap, nilai grid-template kustom (opsional), dan perataan item, dengan pratinjau langsung dan CSS siap salin.
Cara menggunakan
- Atur jumlah kolom dan baris.
- Sesuaikan gap kolom dan baris.
- Jika perlu, masukkan template kustom seperti 200px 1fr 1fr.
- Pilih justify-items dan align-items, lalu klik Copy CSS.
Perlu diketahui
- Satuan fr membagi ruang kosong: 1fr 2fr membuat kolom kedua dua kali lebih lebar dari kolom pertama.
- repeat(3, 1fr) adalah singkatan untuk tiga kolom sama lebar.
- column-gap dan row-gap mengatur jarak antar-track.
- Grid bersifat dua dimensi, mengatur baris dan kolom sekaligus.
- repeat(auto-fit, minmax(200px, 1fr)) membuat grid responsif tanpa media query.
Berjalan sepenuhnya di browser Anda — apa pun yang Anda masukkan tidak diunggah atau disimpan.
Pertanyaan umum
Bagaimana cara membuat grid 3 kolom di CSS?
Gunakan display: grid; grid-template-columns: repeat(3, 1fr); pada container, lalu tambahkan gap untuk jarak.
Apa arti fr di CSS Grid?
fr adalah bagian (fraksi) dari ruang kosong yang tersedia di dalam grid container.
CSS Grid atau Flexbox?
Grid paling cocok untuk layout dua dimensi seperti struktur halaman dan grid kartu; Flexbox untuk baris atau kolom satu dimensi.
Bagaimana membuat grid responsif tanpa media query?
Gunakan grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); kolom akan otomatis pindah baris sesuai ruang yang tersedia.