CSS Grid Generator with Template Areas

Tracks: grid-template-columns and grid-template-rows

CSS Grid divides a container into columns and rows at the same time. The tracks are defined with grid-template-columns and grid-template-rows, and this css grid generator lets you set up to eight of each, with a size per track.

fr is a fraction of the free space left after fixed tracks are placed, so 1fr 2fr gives the second column twice the remaining width. px and % create fixed tracks. auto sizes a track to its content and then lets it absorb leftover space if there are no fr tracks. min-content and max-content size to the narrowest and widest the content can be. minmax(min, max) sets a floor and a ceiling: minmax(160px, 1fr) keeps a sidebar at least 160px wide but lets it grow, which is often enough to avoid a media query. When every track is identical the output collapses them to repeat(), for example repeat(3, 1fr).

row-gap and column-gap add gutters between tracks but not around the outer edge, so you never need negative margins to cancel them out. Gap values are in px here; in your own CSS you can swap them for rem.

Painting grid-template-areas

grid-template-areas lets you name regions of the grid and draw the layout as text. Each quoted string is one row and each word is one cell; repeating a name across cells makes that area span them, and a dot marks an empty cell. A three-row page might read "header header header", "nav main aside", "footer footer footer". Children are then placed with a single grid-area: header declaration instead of line numbers.

To use this grid-template-areas generator, pick an area name from the chips (or type a new one and press Add area), then click a cell or drag across several. The dragged rectangle is filled with that name. Choose Empty (.) to erase cells. The preview grid uses your real track sizes, so you see the proportions while you paint, and a second Rendered result panel shows real elements placed by grid-area once the layout is valid.

Validation matters here because the browser is strict: every named area must form a single filled rectangle. An L-shape, a T-shape or the same name in two separate places makes the whole grid-template-areas declaration invalid, and the browser ignores it entirely rather than guessing. The tool checks each area's bounding box against its cell count and tells you which name is the problem. It also rejects names that are not valid CSS identifiers, such as ones beginning with a digit.

What you can copy

The CSS block contains a .grid-container rule with display: grid, both track lists, the template areas aligned in columns for readability, and the gap, followed by one rule per area such as .main { grid-area: main; }. The HTML skeleton has one div per area with matching class names, ready to paste and fill. A Tailwind line gives the container's grid-cols-[...], grid-rows-[...] and gap as arbitrary values; Tailwind has no utility for grid-template-areas itself, so keep that part in CSS. The presets cover the holy grail layout, a sidebar layout, a dashboard, a magazine grid and a plain three-column card grid.