Generator CSS Grid

Q: Bagaimana cara membuat item membentang selebar penuh?

Atur grid-column ke `1 / -1`; -1 merujuk pada garis grid terakhir.

Bangun tata letak CSS Grid secara visual: grid-template-columns/rows, area bernama dengan validasi, gap, perataan, dan penempatan per item. Salin CSS yang rapi.

Preset

Kontainer

grid-template-columns

grid-template-rows

grid-template-areas

Satu baris per row, nama dipisahkan spasi, titik (.) untuk sel kosong. Setiap nama harus membentuk persegi panjang.

column-gappx

row-gappx

justify-items

align-items

Jumlah item

Elemen 1

Pilih item di sini atau klik item di pratinjau.

grid-column

grid-row

grid-area

Contoh: 1 / 3, span 2, 2 / -1. Nama area menggantikan penempatan garis.

Pratinjau

Seret sudut bawah pratinjau untuk mengubah ukuran kontainer.

Kode CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Alat Terkait

Lihat Semua

Generator CSS Box Shadow Generator CSS Gradient Generator CSS Flexbox Generator Border Radius Generator Glassmorphism Generator Neumorphism Generator Text Shadow Generator CSS Animation

Apa itu Generator CSS Grid?

Pembuat tata letak CSS Grid tempat Anda mengetik template track apa pun (misalnya repeat(auto-fill, minmax(120px, 1fr))), menggambar area bernama, mengatur gap dan perataan, serta menempatkan item satu per satu berdasarkan nomor garis, span, atau nama area. Pratinjau langsung memakai CSS yang dihasilkan.

Cara menggunakan Generator CSS Grid

Mulai dari preset (3 kolom, Kartu responsif, Tata letak holy grail, Sidebar, Bento) atau ketik grid-template-columns dan grid-template-rows.
Opsional, tulis grid-template-areas: satu baris teks per baris grid, nama dipisahkan spasi, titik untuk sel kosong.
Atur row-gap, column-gap, justify-items, align-items, dan Jumlah item.
Pilih sebuah item lalu atur grid-column, grid-row (mis. 1 / 3, span 2) atau pilih grid-area.
Salin kode CSS-nya.

Contoh

Masukan

grid-template-columns 200px 1fr, row-gap 8px, column-gap 16px; item 2: grid-column 1 / 3, grid-row span 2

Keluaran

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px 16px;
}

.item-2 {
  grid-column: 1 / 3;
  grid-row: span 2;
}

Kapan menggunakan Generator CSS Grid

Gunakan grid untuk tata letak dua dimensi: kerangka halaman, dashboard, galeri, dan kisi kartu. Untuk satu baris atau kolom item yang ukurannya mengikuti konten, flexbox sering lebih sederhana (lihat Generator CSS Flexbox).

Cara kerja Generator CSS Grid

Template dan nilai penempatan diperiksa dengan CSS.supports() milik browser, sehingga apa pun yang valid di CSS diterima dan nilai yang tidak valid ditandai. Teks area divalidasi: setiap baris harus memiliki jumlah sel yang sama dan setiap nama harus membentuk satu persegi panjang. Output berisi display: grid, template, grid-template-areas dengan satu string berkutip per baris, gap (satu nilai jika gap baris dan kolom sama, row column jika berbeda), dan perataan hanya jika bukan stretch. Item mendapat aturan grid-area atau grid-column/grid-row hanya jika diatur.

Kasus Penggunaan Umum

Kerangka halaman dengan header, sidebar, main, dan footer
Galeri kartu responsif dengan auto-fill dan minmax()
Dashboard gaya bento dengan petak yang membentang
Tata letak majalah dengan area bernama
Tata letak formulir dengan kolom label dan input

Pertanyaan Umum

Mengapa muncul pesan bahwa area saya bukan persegi panjang?

Di grid-template-areas, setiap nama harus menempati blok sel berbentuk persegi panjang. Bentuk L atau nama yang terpisah di beberapa tempat adalah CSS tidak valid dan seluruh properti akan diabaikan.

Apa bedanya auto-fill dan auto-fit?

Keduanya membuat kolom sebanyak yang muat. auto-fill mempertahankan track kosong, sedangkan auto-fit meruntuhkannya sehingga item yang ada melebar mengisi baris.