Skip to content

Warna & Desain

Generator Tata Letak Grid CSS

Drag track sizers, copy the CSS Grid.

Runs in your browser
Column tracks
Row tracks
1
2
3
4
5
6
CSS
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 80px 80px;
  gap: 12px;
}

Catatan editor

Understanding · The first real layout system the web has had.

Bab mendalam ini saat ini hanya tersedia dalam bahasa Inggris. Alat konversi di atas berfungsi dalam bahasa Anda; artikel penjelasan panjangnya belum diterjemahkan.

Pertanyaan yang sering diajukan

Quick answers.

›What browser support can I expect?

CSS Grid is supported by all modern browsers (Chrome, Firefox, Safari, and Edge). This generator produces standard syntax that is compatible without the need for complex polyfills.

›What are fractional units (fr)?

The `fr` unit represents a fraction of the available space in the grid container. Using `1fr` for multiple columns ensures they share the remaining space equally after fixed-width tracks are accounted for.

›Is my layout data saved to a server?

No. The generator runs completely in your browser and your layout configuration never leaves your machine. You can copy the code directly to your clipboard for use in your project.

›What is the difference between tracks and gaps?

Tracks are the actual columns and rows that hold content, while gaps (gutters) define the empty space between those tracks. You can adjust the `grid-gap` to control spacing without affecting track sizing.

Orang juga mencari

Fitur terkait

More in this room.

Lihat semua di Warna & Desain