CSS Grid Generator
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 46px);
gap: 8px;The CSS grid generator builds a grid template from a column count, a row count, a gap and a column sizing mode, and previews it with numbered cells. The sizing choice is the important one: 1fr shares the row equally, while minmax(0, auto) sizes each column to its content.
How it works
The fr unit represents a fraction of the space left after fixed-size tracks and gaps are subtracted. It is not a percentage. Three columns of 1fr each take a third of the remaining space, whatever the gap.
- repeat(3, 1fr) is shorthand for 1fr 1fr 1fr.
- minmax(0, auto) lets a column shrink below its content size, which plain auto does not.
- gap applies between tracks only, never outside the grid, so there is no edge padding to subtract.
- Items flow into cells in source order unless explicitly placed.
The minmax(0, ...) form matters in practice: a grid column with long unbreakable content will otherwise refuse to shrink and overflow its container. Setting the minimum to zero is the standard fix.
Examples
A three-column equal grid
Columns
3
Rows
2
gap
8px
Sizing
1fr
Result
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 46px); gap: 8px;
Three equal columns share the width remaining after the two 8px gaps, so each is (container width minus 16px) divided by three.
Content-sized columns
Columns
4
Sizing
minmax(0, auto)
Result
display: grid; grid-template-columns: repeat(4, minmax(0, auto)); grid-template-rows: repeat(2, 46px); gap: 8px;
Each column sizes to its own content rather than sharing the row equally, so a column with a long label grows and its neighbours shrink.
Frequently asked questions
What exactly does the fr unit mean?
One fraction of the free space left after fixed tracks and gaps are accounted for. With a 16px total gap in a 320px container, three 1fr columns get 101.33px each, not a third of 320px. That distinction matters as soon as any track has a fixed width.
Why does my grid overflow when a cell has long content?
Because auto-sized and 1fr tracks have an automatic minimum size equal to their content, so an unbreakable string forces the track wider than the container. Writing minmax(0, 1fr) instead of 1fr lets the track shrink, which is the standard fix.
Does gap add space around the outside of the grid?
No, only between tracks. A three-column grid with a 16px gap has two gaps, not four, so there is no outer spacing to compensate for. Use padding on the container if you want edge space.
How do I make a responsive grid without media queries?
repeat(auto-fit, minmax(200px, 1fr)) fits as many 200px-minimum columns as will fit and shares the remainder. This tool generates fixed column counts; auto-fit is a one-line substitution in the output.