Skip to content
Free Tool Arena

Developer Utilities · Free tool

Grid Layout Generator

Build a CSS grid visually — columns, rows, gap, named areas — and copy the exact grid-template-areas rule.

Updated April 2026
1
2
3
4
5
6

Presets

Items (6/12)

CSS

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

What it does

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.

How to use it

  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.