~/css/grid-generator
CSS Grid Generator
Lay out a CSS grid with controls instead of guesswork: set the number of columns and rows, the gaps, choose fixed fractions or a responsive auto-fill grid with a minimum card width, and align the items. The preview updates as you go.
Using the CSS Grid Generator
Fixed or responsive columns
A fixed count such as repeat(3, 1fr) always gives three equal columns, good for a known layout on desktop. The responsive mode uses repeat(auto-fill, minmax(160px, 1fr)): the browser fits as many columns as there is room for, each at least the minimum width, so the grid reflows from one column on a phone to many on a monitor without a single media query.
The fr unit
One fr is one share of the free space. Three columns of 1fr split the row evenly; 2fr 1fr makes the first column twice as wide as the second. Fractions are calculated after gaps and fixed-width tracks, so they never overflow.
Gaps instead of margins
Use column-gap and row-gap rather than margins on the items. Gaps only appear between tracks, never on the outer edges, so you do not need negative margins or last-child fixes.
Aligning items
justify-items places each item inside its cell horizontally, align-items vertically. The default, stretch, makes items fill the cell, which is what you want for cards of equal height.
Frequently asked questions
Grid or flexbox?
Use grid for two-dimensional layouts where rows and columns both matter, such as card galleries and page structure. Use flexbox for a single row or column, such as a toolbar. The flexbox generator covers that case.
Is CSS Grid supported everywhere?
Yes. Every current browser supports CSS Grid, including gaps and minmax.
How do I make one item span two columns?
Add grid-column: span 2 to that item. The CSS grid cheat sheet shows spans and named areas.