CSS Grid Generator

Visually edit CSS Grid: **add / remove rows / cols** (fr / px / % / auto), tune **gap**, paint **named grid areas** spanning multiple cells. Live preview + auto-generated `grid-template-areas` string + complete CSS output (including `grid-area` rules per area). Holy Grail, 2-col split and Dashboard 12-col presets included.

Presets

Cols

Rows

Gappx

Named areas

row→ rowcol→ col

Live preview

header

sidebar

main

footer

grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";

CSS output

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 1fr 3fr 1fr;
  gap: 12px;
  grid-template-areas:
    "header header"
      "sidebar main"
      "footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

›How to use

Drag the rows / cols sliders to size the grid.
Click and drag cells to assign named areas (like header, sidebar).
Built-in Holy Grail, 12-col Dashboard and other presets — one click to apply.
Live preview on the right + one-click CSS export, ready to drop into Tailwind / CSS module.

Tips

Use rem (not px) for gap — it scales with root font-size, friendlier to RWD.
Named areas read better than grid-column-start/end and cost less to maintain.

CSS Grid Generator

Related tools