CSS grid generator
Build a grid, see it respond and copy the CSS: fixed columns, responsive auto-fit, or your own template.
CSS grid without the memorising
CSS grid is the most powerful layout system in CSS, and its syntax has enough variations (fr, minmax(), repeat(), auto-fit, auto-fill) that most people copy the same two or three patterns from old projects. This generator builds those patterns and shows them working, so you can see what each one does and take the CSS.
Choose between a fixed number of equal columns, a responsive auto-fit or auto-fill grid with a minimum column width, or a custom column template such as 200px 1fr 2fr. Set the gaps and the alignment of items inside their cells, and the preview resizes with the card so you can watch the responsive behaviour by resizing your browser window. The notes explain the choices in plain language.
Patterns worth knowing
- Card gallery:
repeat(auto-fit, minmax(240px, 1fr))with a gap. - Sidebar layout:
260px 1fr, collapsing to one column on small screens. - Holy grail layout: header, main and footer rows with
auto 1fr autoand a full-height container. - Equal columns:
repeat(12, 1fr)for a classic 12-column system.
The generated CSS targets a .grid class; rename it to fit your markup. To check how a grid behaves, use your browser's developer tools grid overlay. Everything runs locally in your browser.
Frequently asked questions
What does repeat(auto-fit, minmax(220px, 1fr)) do?
It creates as many columns as fit, each at least 220px wide, and shares leftover space equally. As the container narrows, columns drop out and items wrap to the next row, so the grid is responsive without media queries.
What is the difference between auto-fit and auto-fill?
Both create as many tracks as fit. auto-fill keeps empty tracks, so a short row leaves gaps. auto-fit collapses empty tracks so the existing items stretch to fill the row.
What does 1fr mean?
fr is a fraction of the free space in the grid container. 1fr 2fr gives the second column twice the share of the first after fixed-size tracks and gaps are subtracted.
Should I use grid or flexbox?
Use grid for two-dimensional layouts where rows and columns must line up (galleries, dashboards, page layout) and flexbox for one-dimensional content flow (toolbars, button rows, centering).