Live
Flexbox Generator
The one-dimensional layout tools for smaller groups.
Web · Free tool
Grid Generator
Set the column count and gap, watch the rows lay themselves out, and copy the display: grid block that matches.
Design a grid
Uses
grid-template-columns: repeat(N, 1fr) — equal, responsive columns.
Live preview
How it works
How CSS grid works
Two axes at once
Grid positions children in rows and columns simultaneously. grid-template-columns defines the column track; grid-template-rows does the same for rows when you need fixed heights.
Auto-placement
Children are placed into cells left-to-right, top-to-bottom automatically. As the column count changes, items reflow into new rows — exactly what you want for galleries and dashboards.
Gap keeps it clean
Instead of margins on every child, one gap declaration spaces all tracks. Change it once in the preview and the whole grid breathes.
Questions
Grid FAQ
When should I use grid instead of flexbox?
Grid when you control both axes — galleries, dashboards, page layouts. Flexbox when it's a single row or column of items. The rule of thumb: flex is one-dimensional, grid is two-dimensional.
What does 1fr mean?
fr is a fractional unit of free space. repeat(3, 1fr) gives three equal columns that share all available width and adapt when the container resizes.
What is gap for?
gap adds even spacing between rows and columns without needing margins — the modern replacement for the old gutter hacks, and it works on everything.