Skip to content
uxTools
Design & CSS

CSS Grid Generator

Click cells to draw named areas, drag track edges, configure gap and alignment, add child items with column / row spans, then copy CSS, Tailwind, HTML, React JSX, or JSON.

Live preview

Edit the grid, items and areas — preview updates instantly.

1
2
3
4
5
6

Named areas

Type a name then click two cells (start + end) to paint a rectangle. Click a cell again with an empty name to clear it.

Tip: type a name above, then click two cells to paint that area.

Presets

Common layouts you can drop in and tweak.

Tracks & gaps

Resize the column and row counts, then tune each track's size.

Columns3 cols
  • 1
  • 2
  • 3
Rows2 rows
  • 1
  • 2
16px
16px

Grid items

6 / 12

Up to 12 children. Set explicit column/row lines or pick a named area.

#1
col start
col end
row start
row end
Area
#2
col start
col end
row start
row end
Area
#3
col start
col end
row start
row end
Area
#4
col start
col end
row start
row end
Area
#5
col start
col end
row start
row end
Area
#6
col start
col end
row start
row end
Area

Code output

Copy as CSS, Tailwind classes, raw HTML, JSX, or JSON.

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