CSS Grid Generator
What display: grid does
CSS Grid lays out content in two dimensions at once, so rows and columns line up without wrapper elements. CSSGen.dev's grid generator writes the track definitions for you, including fr units, minmax() and auto-fit, and lets you span a single item across cells to see how the rest reflows.
Syntax
display: grid; grid-template-columns: <tracks>; gap: <length>;| Part | What it controls |
|---|---|
| grid-template-columns | The column tracks. Each value is one track: a length, a percentage, auto, or a fraction of the free space with fr. |
| fr | A share of whatever space is left. 1fr 2fr gives the second column twice the leftover width, after fixed tracks and gaps are taken out. |
| repeat() | Shorthand for repetition. repeat(3, 1fr) is three equal columns; repeat(auto-fit, minmax(220px, 1fr)) is a grid that reflows on its own with no media queries. |
| minmax() | A floor and a ceiling for a track, so a column can be at least 220px but still grow to fill. |
| gap | Space between tracks. row-gap and column-gap set them separately. |
| grid-column / grid-row | Per item: which lines it starts and ends on. span 2 is the readable way to cover two tracks. |
Notes from practice
auto-fit with minmax is the responsive grid
repeat(auto-fit, minmax(240px, 1fr)) fits as many columns as will hold 240px and stretches them to fill. It replaces a whole stack of breakpoints with one line.
auto-fit and auto-fill differ when items run out
auto-fit collapses empty tracks so the remaining items stretch; auto-fill keeps them, leaving a gap at the end. Use auto-fit unless you want the columns to hold their positions.
Gaps come out of the free space
fr distributes what is left after fixed tracks and every gap. That is why three 1fr columns with a 24px gap are narrower than a third of the container each.
CSS Grid Generator FAQ
How do I create a responsive grid without media queries?
Use grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)). The browser fits as many 240px columns as the container allows and stretches them to fill the row, reflowing automatically as the width changes.
What does the fr unit mean in CSS grid?
fr is a fraction of the free space left after fixed-size tracks and gaps are subtracted. In grid-template-columns: 200px 1fr 2fr, the fixed 200px comes off first and the rest is split one third to two thirds.
What is the difference between auto-fit and auto-fill?
Both repeat tracks to fill the container. When there are fewer items than tracks, auto-fit collapses the empty ones so the items stretch across the full width, while auto-fill keeps them, leaving empty space at the end of the row.
How do I make a grid item span multiple columns?
Use grid-column: span 2 on the item to cover two tracks, or name explicit lines with grid-column: 1 / 4 to run from line 1 to line 4. The same applies to grid-row for vertical spans.
Should I use CSS grid or flexbox?
Use grid when the layout is two-dimensional and rows and columns both need to align, such as a page shell or a card gallery. Use flexbox for one-dimensional runs like toolbars and button groups. Nesting a flex container inside a grid cell is common and perfectly fine.
Related generators
- Flexbox — Direction, wrapping, alignment and gap, plus per-item grow, align-self and order.
- Container Queries — Style a component by the width of its own container instead of the viewport.
- Multi-column Layout — Flow text into balanced newspaper columns with rules, gaps and a spanning heading.
- Aspect Ratio & Object Fit — Hold a box to a ratio, then choose how the image fills it. The dashed frame marks the original edges.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.