CSS Grid Generator
Set columns, rows, and gap to build a CSS grid layout with a live preview, then copy the grid CSS.
Start any grid layout in seconds
CSS Grid is the most powerful layout tool in the browser, but the boilerplate — the display: grid,
the grid-template-columns with the right number of fr tracks, the gap — is easy to fumble
when you just want to get going. This generator writes it for you: set the columns, rows, and gap, and it renders a
live grid of numbered cells so you can see the structure immediately.
The output uses equal fractional tracks, the sensible default for a balanced grid, and you can adapt it from there
— swap in repeat(auto-fit, minmax()) for automatic wrapping, or wrap the column count in media
queries for responsive breakpoints. Copy the CSS and drop it onto your container.
Copy-ready CSS
Generated live in your browser — nothing is uploaded.
Frequently Asked Questions
What does this CSS grid generator produce?
It builds a display:grid container with your chosen number of columns and rows, a gap, and equal fractional (1fr) tracks — the CSS you need to start a responsive grid layout.
What is a fr unit?
fr is a fractional unit that splits available space. grid-template-columns: 1fr 1fr makes two equal columns; changing the numbers changes their proportions.
How do I make the grid responsive?
Wrap the column count in a media query, or use repeat(auto-fit, minmax(200px, 1fr)) so columns wrap automatically as the container narrows. This tool gives you the base to adapt.
Is this generator free and private?
Yes. The CSS is generated in your browser with no sign-up and nothing uploaded.
Want a full responsive layout built for you? Let’s talk.