CSS Grid Generator
Create CSS Grid layouts by choosing rows, columns and gaps, then copy the code — with the fraction unit and auto-fit patterns that make grids responsive.
Fractions divide the free space, not the container
200px 1fr 1fr in a 600px container does not give thirds of 600. Fixed tracks are
placed first, and the fractions split what is left —
600 − 200 = 400px, halved:
| Template | Resolves to | |
|---|---|---|
1fr 1fr | 300px · 300px | nothing to constrain them, so a straight half each |
200px 1fr 1fr | 200px · 200px · 200px | the fractions split the 400px left over, not the 600 |
1fr 1fr | 380px · 220px | a 380px unbreakable string sets a floor the fraction cannot cross |
minmax(0, 1fr) minmax(0, 1fr) | 300px · 300px | the floor removed, so the long content overflows instead |
The answer happens to be 200 / 200 / 200, which looks like equal thirds and is not — add a second fixed track and the fractions shrink again while the fixed ones do not move.
And a bare 1fr has a floor you did not ask for
This is the one that actually breaks layouts. A bare 1fr is shorthand for
minmax(auto, 1fr), and that auto minimum is the track's
min-content size. So a fraction can never shrink below the widest unbreakable thing inside it.
1fr 1fr with a 380px unbreakable string in the first column
minmax(0, 1fr) minmax(0, 1fr)
380 and 220, not
300 and 300. Nothing overflows,
nothing warns, and the layout is simply lopsided. A long URL, a code sample, a wide table or a
white-space: nowrap heading all do this — which is why “my two equal columns
are not equal” is such a common complaint with such an invisible cause.
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
That restores 300 / 300 and lets the
long content overflow or scroll inside its own track instead of pushing the track wider.
min-width: 0 on the grid item does the same job from the other side.
How to use
- Set the number of rows and columns.
- Adjust the track sizes and gap.
- Place items in the preview.
- Copy the generated CSS.
Frequently asked questions
What is the fr unit?
A fraction of the free space remaining after fixed-size tracks and gaps are accounted for. Three columns at 1fr each divide the leftover space equally. It differs from a percentage in that it accounts for the gaps, which percentages do not — a row of three 33 per cent columns with gaps overflows.
When should I use Grid rather than Flexbox?
Grid for two-dimensional layout where rows and columns both matter, and Flexbox for arranging items along a single axis. A page skeleton is a grid problem; a row of buttons is a flex problem. They compose well, and most real layouts use both.
What does auto-fit do?
Creates as many tracks as will fit, which combined with minmax produces a responsive grid with no media queries at all — items sit side by side when there is room and wrap when there is not. It is the single most useful grid pattern for card layouts.
What is the difference between auto-fit and auto-fill?
How they treat empty tracks. Auto-fill keeps the empty columns, so remaining items stay at their minimum width; auto-fit collapses them, letting the existing items stretch to fill the row. Auto-fit is usually what people want, and the difference only shows when there are fewer items than columns.
What are named grid areas?
A way of describing the layout as a picture in the CSS, using a block of quoted strings where each name marks a region. It is far more readable than line numbers, and rearranging the layout at a breakpoint becomes a matter of rewriting that picture.
Does Grid have accessibility implications?
Yes, and it is easy to miss. Grid can place items visually in an order different from the source, but screen readers and keyboard navigation follow the source order. A visual order that diverges from the reading order is confusing and fails accessibility guidance, so reordering should be used sparingly.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.