CSS Grid Generator

How It Works

The grid tab builds track lists from your counts and sizes: three 1fr columns become grid-template-columns: repeat(3, 1fr), the shorthand that expands to one fraction of free space per column. auto sizes a track to its content, and a fixed px value reserves exactly that width — a common recipe is one fixed sidebar track plus a fluid 1fr track. If you want a track that flexes with limits, hand-edit the output into minmax(80px, 1fr), which this builder deliberately keeps out of the shorthand so the generated CSS stays readable.

The fr unit

An fr is one share of the space left after fixed-size tracks, gaps and padding are subtracted — free space, not a percentage. That distinction matters: with a 200px sidebar, gap 16px and two 1fr columns, each fr gets (width − 216px) ÷ 2. Two tracks at 2fr 1fr split the same remainder 2:1, and an fr never causes overflow the way percentages can when you forget the gaps.

grid-template-areas naming rules

Every quoted string is one row; each token is one cell, and tokens must line up in count across rows. A named area must form a perfect rectangle — an L-shaped region is invalid and, honestly, the browser discards the whole grid-template-areas declaration when any name breaks the rule, so the warning line above is not cosmetic. Empty cells use the dot character. Once painted, each item can grab an area by name instead of counting start/end lines.

Implicit vs explicit tracks

You declare the explicit grid — the tracks in grid-template-columns and -rows. Content beyond it (more items than cells, or an area grid plus unassigned items) creates implicit tracks outside the template, sized by grid-auto-columns/-rows, which default to auto. That is why a demo that looks like it has extra mystery rows usually just overflowed the explicit grid.

Frequently Asked Questions