Responsive CSS Grid Generator
Draw the layout at each width. Copy CSS with the media queries already written.
Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.
.layout {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
gap: 16px;
grid-template-areas:
"header"
"main"
"footer";
}
.layout > .header { grid-area: header; }
.layout > .main { grid-area: main; }
.layout > .footer { grid-area: footer; }
.layout > .nav { display: none; }
@media (min-width: 768px) {
.layout {
grid-template-columns: 220px 1fr;
grid-template-areas:
"header header"
"nav main"
"footer footer";
}
.layout > .nav { grid-area: nav; }
}
One layout is never enough
Most CSS grid generators hand you a single static grid. Real layouts change shape as the viewport does. Here you drag the ruler above to any width, redraw the grid for that width, and the export carries every breakpoint with it — mobile-first, and only repeating the properties that actually change.
It works as a plain grid generator too: set the columns and rows, drag out the areas, and
take the code. Whether you think of it as a CSS grid layout generator, a grid builder, or a
grid-template-areas generator, it is the same three steps — and unlike a
snippet you copy off a blog, what comes out is scoped to a class name you choose and
already handles the widths you care about.
Start from a layout pattern
Every pattern opens in the editor, already responsive. Change anything.
-
Holy Grail Layout
Header, footer, two flanking sidebars and a fluid centre column — the layout CSS Grid finally made easy.
-
Dashboard Layout
Fixed sidebar, sticky topbar, scrolling content well. The admin-panel skeleton, without the framework.
-
Sidebar Layout
One fixed column, one fluid column, stacked on small screens.
-
App Shell
Rail, sidebar, header, content and a status bar — the full desktop application frame.
-
Responsive Card Grid
Equal-width cards that reflow from one column to four without a single media query — or with them, if you want control.
-
Magazine Layout
An asymmetric editorial grid: a lead story, a stack of secondaries, and a pull-quote that breaks the column.
-
Split Screen Hero
Copy on one side, artwork on the other, flipping to stacked on mobile.
-
Pricing Table
Three tiers side by side, with the featured plan given extra width.
-
Blog Post with Sticky Contents
A readable measure in the middle, a sticky table of contents beside it, full-bleed figures that break the container.
-
Bento Grid
Mixed-size tiles in a tight, deliberate arrangement — the Apple keynote look.
-
Footer Columns
A brand block plus link columns that collapse gracefully.
-
Product Page
Gallery, buy box and details — the e-commerce detail page skeleton.
How to use it
-
Set the preview width
Drag the playhead along the ruler above the canvas. The canvas resizes to that exact width and the breakpoint it falls into becomes the one you are editing — the panel on the right always says which.
-
Draw your areas
Drag across the grid to create a named area. Each area becomes one child element in the exported HTML, and it exists at every breakpoint.
-
Size the tracks
Edit the column and row values in the Tracks panel. Anything valid in a track list works: fr, px, %, auto, min-content, minmax() and repeat().
-
Redraw at the next breakpoint
Move the playhead past a breakpoint marker and rearrange freely. Only the placement changes — the elements stay the same, which is what keeps the exported CSS correct.
-
Copy the code
Take CSS, HTML or Tailwind from the panel below. The media queries are already written, and only the properties that actually change are repeated.
How the breakpoint export works
The areas you draw are the same DOM elements at every width — only their placement changes. That is what makes the generated CSS correct: one block of HTML, one base rule, and a media query per breakpoint that overrides just the tracks and placements that differ.
Where your areas tile cleanly, the export uses grid-template-areas, so the CSS
reads as a picture of the layout. Where they overlap — which named areas cannot express —
it falls back to explicit grid-area line numbers and tells you why.
Named areas or line numbers?
Named areas are easier to read and change: rearranging a page means editing the ASCII map
and nothing else. Line numbers win when items overlap, when tracks are generated with
repeat(), or when placement is computed. The generator picks for you and shows
its reasoning; the dropdown overrides it.
A note on source order
Grid will happily place an element anywhere, including somewhere that contradicts its position in the HTML. Keyboard and screen-reader users follow the DOM, not the visual grid, so a layout that reorders content between breakpoints needs a deliberate check that it still reads in a sensible sequence.
For the full property reference — every container and item property, and every track-size value with the reason to use it — see the CSS Grid cheat sheet.
Frequently asked questions
How do I center a grid in CSS?
justify-content: center on the grid container to centre the whole grid inside it, and margin-inline: auto with a max-width to centre the container in the page. These are different jobs: the first moves the tracks within the container, the second moves the container itself.How do I center items inside a CSS grid?
place-items: center on the container. That is shorthand for align-items plus justify-items, and it centres every item inside its own cell on both axes. For a single item, use place-self: center on that item instead.How do I make a CSS grid responsive?
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) and it reflows at every width with no media queries at all. Add breakpoints only when the exact column count matters, or when the layout has to change shape rather than just wrap.When should I use CSS Grid instead of Flexbox?
What is the fr unit in CSS Grid?
fr is a fraction of the space left over after fixed tracks and gaps are subtracted. In grid-template-columns: 200px 1fr 2fr, the 200px is taken out first, then the remainder splits three ways — one part to the second column, two to the third. It is not a percentage of the container.Why does my grid item overflow its column?
1fr means minmax(auto, 1fr), and that auto minimum refuses to shrink below the content — a wide image or long unbroken string pushes the track open. Use minmax(0, 1fr) instead.