What is the CSS Grid Generator?
CSS Grid is the most powerful layout system in CSS — a two-dimensional grid that places elements into rows and columns at the same time. Build one visually and copy the exact CSS it produces.
Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.
Using the CSS Grid Generator
Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.
Set columns & rows
Use the Columns and Rows sliders to define your grid shape. The preview rebuilds instantly so you always see the structure.
Adjust the gap
Slide the Gap control to add breathing room between cells. It maps directly to the CSS gap property — consistent spacing everywhere.
Pick column sizing
Choose fr units for equal flexible columns, or Auto-fit for a grid that wraps responsively without media queries.
Copy your CSS
Hit Copy and paste the output onto your container element. That is the whole workflow.
What the generated code looks like
Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 14px;
}Switch to Auto-fit and the output uses repeat(auto-fit, minmax(…, 1fr)) — a grid that fits as many columns as will comfortably fit, then wraps. Responsive with zero media queries.
Ready-to-use CSS patterns
Drop any of these straight into your project — no modifications needed.
Responsive auto-fit grid
Fills the row with as many columns as fit, then wraps. No breakpoints required.
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}Holy grail page layout
Header, sidebar, content and footer with named areas.
.page {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
}Common mistakes & how to fix them
A few habits trip people up. Here is what to watch for — and the exact fix.
Fixed px columns
Using 200px 200px 200px makes columns that cannot adapt and overflow on small screens.
Fix: Use 1fr units so columns share space and stay fluid.
Margins for spacing
Adding margins to grid items creates uneven, hard-to-balance gutters.
Fix: Use the gap property — one value, consistent everywhere.
Media queries for wrapping
Writing breakpoints to change column counts is verbose and brittle.
Fix: Use Auto-fit with minmax() for responsive wrapping for free.
Grid for everything
Reaching for Grid on a simple one-row button group adds needless complexity.
Fix: Use Flexbox for single-axis layouts; save Grid for true 2D layouts.
Pro tips for better results
fr beats percentages
Fractional units account for the gap automatically. Three 1fr columns with a gap always add up correctly, where 33.33% columns plus gaps overflow.
minmax() prevents squashing
repeat(auto-fit, minmax(220px, 1fr)) guarantees columns never shrink below 220px before wrapping to a new row.
Frequently asked questions
From the blog
Read more →Modern CSS techniques every developer should know
A practical tour of the CSS features that replaced yesterday’s hacks.
From design to code without the friction
How visual generators speed up the build without sacrificing clean output.
Writing CSS that scales with your project
Tokens, naming, and structure that keep large stylesheets maintainable.