TPToolpazar

Global Araç

Grid Layout Generator

1
2
3
4
5
6

Ön ayarlar

Öğeler (6/12)

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
}

Build a CSS Grid layout visually: define columns and rows, set gaps, name template areas by clicking cells. The tool outputs a full grid-template-areas rule and per-item placements you can paste straight into your stylesheet.

For flexbox instead use flexbox playground. For responsive sizing, CSS clamp generator. For preview polish, box shadow generator.

Nasıl Kullanılır

  1. Set column and row counts and sizes.
  2. Click cells to assign named areas (header, sidebar, main…).
  3. Adjust gap between tracks.
  4. Copy the full grid-template rule.