CSS Grid Generator
Create CSS Grid layouts visually online for free — set columns, rows, track sizing and gaps with a live preview, then copy the code.
100% private — runs entirely in your browser. Your files never leave your device.
Set columns, rows, track sizing and gaps, then copy the CSS for your .container. “Responsive”
uses auto-fit + minmax() so columns reflow without media queries. Runs in your browser.
How to use the CSS Grid Generator
- Set the number of columns and rows.
- Choose track sizing and gaps.
- Watch the live grid preview.
- Copy the CSS for your container.
What you can use it for
- Prototype a CSS grid layout
- Create responsive auto-fit grids
- Grab ready grid CSS for a component
- Learn grid-template syntax by example
More free tools
Styling a website?
Generate shadows, gradients, layouts and effects with our free CSS tools — copy the code and go.
Frequently asked questions
What does this generate?
The CSS for a grid container — display: grid, grid-template-columns/rows and gaps — ready to paste onto your .container.
What is the 'Responsive' column option?
It outputs repeat(auto-fit, minmax(...)), so columns automatically wrap to fit the available width without media queries.
What's the difference between fr, auto and minmax?
'fr' shares free space equally, 'auto' sizes to content, and minmax(0, 1fr) makes flexible columns that can shrink below their content — useful to prevent overflow.
Is my data uploaded?
No — everything is generated in your browser.