CSS Grid Generator
Define columns, rows and gaps, see the grid, and copy the CSS.
● Your files are processed locally in your browser and are not uploaded to our servers.
How it works
The preview uses the generated CSS directly. “Responsive auto-fit” creates as many columns as fit, each at least 160 px wide — a common pattern for card grids that needs no media queries.
FAQ
What is fr?
A fraction of the free space. Three 1fr columns share the width equally; 2fr 1fr makes the first twice as wide.