ZumaTools

CSS grid generator

Set your tracks and gaps, drag across cells to paint named areas, and copy the generated CSS and HTML.

Columns
3
Rows
3
Column sizes
Row sizes

Valid sizes: fr, px, %, auto, min-content, max-content, minmax(…).

Paint area
header
sidebar
main
footer

Tap or drag across cells to paint the selected area. Areas stay rectangular, as grid-template-areas requires.

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

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }

.main { grid-area: main; }

.footer { grid-area: footer; }
HTML
<div class="grid-container">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="main">main</div>
  <div class="footer">footer</div>
</div>

Everything runs locally in your browser — nothing is uploaded.

How it works

  1. Set the number of columns and rows, then give each track a size — fr units for flexible tracks, px for fixed ones, or auto to size to content. Adjust the gap sliders to space the tracks.
  2. Pick an area name like header or sidebar, then tap or drag across cells in the preview to paint it. Each area must stay rectangular, exactly as grid-template-areas requires.
  3. Copy the generated CSS — template columns, rows, gap, grid-template-areas and the child placements — plus the matching HTML snippet, and paste both into your project.

Frequently asked questions

What is grid-template-areas and why use it?
It is a CSS property that lets you draw your layout as a text map: each quoted string is a row, each word is a cell, and repeating a name merges cells into one region. Children are then placed with a single grid-area declaration instead of line numbers, which makes the layout self-documenting and trivial to rearrange in media queries.
What is the difference between fr, px and auto track sizes?
px tracks are fixed and never flex, auto tracks grow to fit their content, and fr tracks share whatever space is left over in proportion to their number — 2fr gets twice the free space of 1fr. A classic page shell mixes them: a 250px sidebar next to a 1fr main column, with auto rows for the header and footer.
Why do my areas have to be rectangular?
The CSS specification requires every named area in grid-template-areas to form a single filled rectangle; an L-shaped or split area makes the whole declaration invalid and browsers ignore it. This tool enforces the rule while you paint, so if a new area cuts through an existing one, the broken area is cleared rather than producing CSS that silently fails.
Does the generated CSS work in all browsers?
Yes. CSS Grid, including grid-template-areas, gap and fr units, has shipped unprefixed in every major browser since 2017 and now covers effectively all users. The output uses only these standard properties, so no fallbacks, prefixes or build tools are needed.
Is my layout uploaded or stored anywhere?
No. The builder is plain client-side code: the preview is rendered by your own browser and the CSS and HTML strings are assembled locally in JavaScript. Nothing is sent to a server, there is no account, and the layout exists only on your screen until you copy it.

About this tool

CSS Grid is the most capable layout system the web has, but writing grid-template-areas by hand — counting cells, keeping row strings the same length, remembering which name spans where — is error-prone enough that most developers sketch the layout first anyway. This generator makes the sketch the source of truth: you define the track structure, paint regions directly onto a live grid, and the matching code is written for you as you work.

You control the geometry precisely. Column and row counts go up to eight tracks each, and every track takes its own size — flexible fr units, fixed px values, auto, or anything valid such as minmax() or min-content. Separate sliders set the row and column gap. To place regions, choose a name like header or main and drag across cells (a single tap paints one cell, which works well on phones); the tool keeps every area rectangular, because that is what the grid-template-areas syntax demands, and clears any region that a new paint stroke would break instead of emitting invalid CSS.

Everything runs in your browser. The preview is your own rendering engine drawing real grid tracks, so what you see is what ships, and no layout data ever leaves your device. The output comes in two parts: a complete container rule with display: grid, grid-template-columns, grid-template-rows, gap and the areas map, followed by one grid-area rule per region — plus an HTML snippet with matching class names so you can paste a working page skeleton in seconds.

A few practical tips: use auto rows for headers and footers so they hug their content, and reserve fr rows for regions that should fill the viewport. Name areas after their role, not their position — sidebar survives a redesign better than left-column. And when you need a different arrangement on mobile, keep the same child rules and simply redefine grid-template-areas inside a media query; that is the property’s superpower, and the generated code is structured to take advantage of it.

Related tools