CSS Grid Generator

A grid-template-areas declaration is one of the most readable pieces of CSS there is, but only once it exists — getting there by hand means counting quoted strings and matching row lengths, and one mismatched cell silently breaks the whole layout. This generator turns that into direct manipulation: set the column and row counts, type a name into any cell of the live grid, and matching names merge into one named region automatically.

Under the hood, every cell you leave blank becomes a dot in the generated grid-template-areas string, and every cell you name becomes part of that name's rectangle. CSS only allows a named region to occupy one clean rectangular block, so the tool checks that as you type and tells you exactly when a name is not forming a valid rectangle yet — instead of silently producing CSS the browser will reject.

Column-gap and row-gap default to 8px and combine into a single gap line when they match, and the live preview grid always mirrors your grid-template-columns and grid-template-rows tracks, including fixed pixel columns from a preset like the holy grail's 200px side rails. The copyable output covers both sides: a CSS block ready for your stylesheet and a matching HTML skeleton with one grid-area div per named region.

Grid and flexbox solve different layout problems, and the css-flexbox-generator on this site is the better starting point for one-dimensional layouts — a single row or column of flexible items such as a nav bar or a stack of cards. Reach for this grid generator instead when you need two-dimensional control, explicit rows and columns, or named regions like header/nav/main/footer; the two tools often end up on the same page, grid for the page shell and flexbox inside its pieces. Like every tool on this site, it runs entirely in your browser — no upload, no account.