Pembuat CSS grid dan flexbox

Pembuat visual grid (track, area) dan flexbox dengan keluaran CSS, HTML, Tailwind.

Start from
Columns 200px 1fr 200px
1. Unit
2. Unit
3. Unit
Rows auto 1fr auto
1. Unit
2. Unit
3. Unit
Name areas (grid-template-areas)

Type a name, then click a cell or drag across cells. Shift+click fills the rectangle from the last cell. Each area must be one rectangle.

Live preview

Drawn by your browser from the generated CSS. Drag the corner to resize it.

header
nav
main
aside
footer

Apa yang dilakukan

Dua pembuat untuk dua sistem tata letak CSS, dengan pratinjau yang digambar browser Anda dan tiga keluaran: CSS, HTML yang sesuai, dan aturan yang sama sebagai kelas Tailwind CSS v4.

Di Grid Anda menentukan kolom dan baris dengan fr, px, %, auto, min-content, max-content atau minmax(px, fr); track yang sama ditulis dengan repeat(); mengatur jarak dan perataan, mengaktifkan mode repeat(auto-fit, minmax(…, 1fr)), dan mengecat area bernama dengan mengklik atau menyeret di atas sel. Di Flexbox Anda memilih arah, pembungkusan, justify-content, align-items, align-content, jarak dan, per item, flex-grow, flex-shrink, flex-basis, order serta align-self.

Hal penting

Setiap area bernama harus satu persegi panjang penuh: bentuk L membuat seluruh grid-template-areas tidak valid, dan alat ini mendeteksinya sebelum Anda menyalin kode. fr membagi ruang yang tersisa setelah track tetap dan jarak. flex: 1 berarti grow 1, shrink 1 dan basis 0%, sehingga item sama lebar. order hanya mengubah urutan visual, bukan urutan keyboard atau pembaca layar.

Pertanyaan yang sering diajukan

Grid atau flexbox?

Grid untuk dua dimensi sekaligus; flexbox untuk satu arah yang dipandu konten.

Mengapa grid-template-areas tidak berfungsi?

Biasanya ada area yang tidak persegi panjang atau baris dengan jumlah sel berbeda.

Apa arti flex: 1?

flex-grow 1, flex-shrink 1, flex-basis 0%: membagi ruang secara merata.

Baca selengkapnya

Diperbarui 14 Oktober 2026 · Lainnya di Web, SEO dan pemasaran