CSS Grid Generator
Build an equal or responsive auto-fit CSS grid with gap and alignment controls, a live preview, and copy-ready 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 tracks, the gaps and alignment — is easy to fumble when you
just want to get going. This generator writes it for you and renders a live grid of numbered cells so you see the
structure immediately.
Choose equal columns for a fixed count of 1fr tracks, or switch to
responsive auto-fit to get repeat(auto-fit, minmax(200px, 1fr)) — columns that wrap
on their own as the container narrows, with no media queries. Then set separate column and row gaps, pick how items
justify and align, and copy the result onto your container.
Copy-ready grid CSS
The output is a complete display: grid rule with your tracks, gaps, and alignment. Generated entirely in your browser.
Frequently Asked Questions
What does this CSS grid generator produce?
It builds a display:grid container CSS from your controls: fixed equal columns or a responsive auto-fit layout, with column and row gaps and item alignment, ready to copy.
What is the responsive (auto-fit) mode?
It outputs repeat(auto-fit, minmax(WIDTHpx, 1fr)), which fits as many columns as will hold your minimum width and wraps automatically as the container narrows — no media queries needed.
What is an 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.
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.