CSS Grid Generator

Build CSS Grid layouts visually.

grid-template-columns

grid-template-rows

column-gap

row-gap

justify-items

align-items

justify-content

Jumlah item: 6

Pratinjau

CSS yang dihasilkan

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  column-gap: 16px;
  row-gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
}

Tentang alat ini

Generator Tata Letak Grid CSS memungkinkan Anda merancang layout grid dua dimensi secara visual dengan menyesuaikan grid-template-columns, grid-template-rows, properti gap, dan pengaturan perataan. Pratinjau langsung menunjukkan hasilnya sebelum menulis kode.

CSS Grid adalah sistem layout paling kuat dalam CSS, dirancang untuk layout dua dimensi (baris DAN kolom secara bersamaan). Melengkapi Flexbox yang menangani layout satu dimensi.

Cara penggunaan

Atur grid-template-columns untuk mendefinisikan struktur kolom. Gunakan tombol preset untuk pola umum.
Opsional atur grid-template-rows (biarkan auto untuk sebagian besar layout).
Sesuaikan column-gap dan row-gap untuk jarak.
Gunakan justify-items dan align-items untuk mengontrol penempatan item dalam sel.
Ubah jumlah item dengan slider untuk melihat respons grid.
Klik Salin untuk menyalin CSS yang dihasilkan.

Kasus penggunaan

Pengembang front-end menggunakan CSS Grid untuk layout halaman, struktur dashboard, dan galeri gambar. Desainer mengekspor spesifikasi grid sebagai CSS tepat untuk dibagikan ke pengembang. Tim design system menggunakannya untuk memprototipe pola jarak dan kolom.

Pertanyaan umum

Apa arti 1fr? — fr adalah satuan fraksional. 1fr berarti satu bagian dari ruang yang tersedia. repeat(3, 1fr) membuat tiga kolom yang sama.
Kapan menggunakan Grid vs Flexbox? — Gunakan Grid untuk layout dua dimensi (baris dan kolom). Gunakan Flexbox saat menyusun item dalam satu arah.
Apakah CSS Grid didukung di semua browser? — Ya. CSS Grid sepenuhnya didukung di semua browser modern sejak 2017.