CSS grid generator
Generated in your browser · nothing is uploaded
Builds a `display: grid` rule with `repeat()` columns, rows and gaps, previewed as real boxes so you can see what the numbers do.
How to use the css grid generator
The choice that matters most is the column size, and 1fr is not always right. 1fr means one equal share of the free space — but its default minimum is auto, which means a column will refuse to shrink below its content. One long unbreakable string and the grid overflows its container, which is the single most common grid bug. minmax(0, 1fr) sets the minimum to zero and fixes it, at the cost of letting content overflow the column instead, where overflow: hidden or min-width: 0 can catch it.
For a responsive grid, the pattern to know is repeat(auto-fill, minmax(220px, 1fr)). It fits as many 220px-minimum columns as the width allows and shares the remainder between them, so the layout reflows with no media queries at all. auto-fit is the same but collapses empty tracks, which matters only when you have fewer items than columns. Then auto-fit stretches them and auto-fill leaves gaps.
gap takes row gap first when given two values, which is the reverse of what most people guess.
Questions
A 1fr column will not shrink below its content by default. Use minmax(0, 1fr) to let it.
They differ only when there are fewer items than columns: auto-fit collapses the empty tracks and stretches the items, auto-fill leaves the gaps.
Row gap first, then column gap: the opposite of what most people expect.
repeat(auto-fill, minmax(220px, 1fr)). It fits what it can and shares the remainder.
Grid when you are placing things in two dimensions, flexbox when a single row or column should distribute space.