About CSS Grid Generator
Grid is two dimensional, which is the whole reason to use it over flexbox: rows and columns line up with each other, so a page layout stays aligned without nesting containers inside containers.
The single most useful thing grid can do is repeat(auto-fill, minmax(200px, 1fr)). That one line says: fit as many columns as will fit at 200 pixels or wider, and share out the leftover space between them. It produces a responsive card layout that reflows at every width with no media queries at all, which is why it is set as the default here.
The fr unit is the other idea worth internalising. It is not a percentage — it is a share of whatever space is left after fixed tracks and gaps have been subtracted. That is why 240px 1fr gives a fixed sidebar beside a main area that absorbs everything else, and why it keeps working when you change the gap.
How to build a grid
Start from a preset
Equal columns, a sidebar layout, the holy grail, or responsive cards. Each is a real pattern rather than a demo.
Adjust the tracks
Edit grid-template-columns directly. The preview updates as you type.
Copy the CSS
Defaults are omitted from the output, so you get the shortest rule that produces what you see.
Units that matter in a grid
- fr — a share of the space left over. 1fr 2fr splits the remainder one third to two thirds.
- minmax(min, max) — a track that will not go below one size or above another.
- auto — sized to the content in that track.
- repeat(n, …) — shorthand for repeating a track pattern.
- auto-fill and auto-fit — let the browser decide how many tracks fit, which is what makes a grid responsive without media queries.