Responsive CSS Grid Generator
Draw the layout at each width. Copy CSS with the media queries already written.
Reading orderAt Desktop, nav is the first thing seen but main is the first thing focused. Placement has moved the layout out of document order, so keyboard and screen reader users get a different sequence from everyone else.
Seenheader → nav → main → footer
Focusedheader → main → footer → nav
Usually the fix is in the markup, not in CSS: reorder the children so the HTML reads the way the page does, then place them back where you want them. Reaching for order or row-reverse instead moves the picture without moving the focus, which is the bug rather than the cure.
It is not always wrong. A full-height sidebar beside a topbar diverges by construction, and the accepted answer there is a skip link to the main content rather than a reordered document. WCAG 2.2 SC 1.3.2 asks that the sequence be meaningful — not that it be identical.
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 and drop the areas,
and take the code. (For how it stacks up against Layoutit and the other popular tools, see
the CSS grid generator comparison.)
Whether you think of it as a CSS grid layout generator, a grid builder, a
grid maker 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.
01. Patterns
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.
-
12 Column Grid
The bootstrap-style twelve-column grid, written in real CSS Grid with no row or col classes.
-
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.
-
Admin Panel Layout
Sidebar navigation, a topbar, a breadcrumb strip and a content well that scrolls by itself.
-
Magazine Layout
An asymmetric editorial grid: a lead story, a stack of secondaries, and a pull-quote that breaks the column.
-
Photo Gallery Grid
A responsive image grid with featured tiles that span two cells, and no media queries needed for the columns.
-
Bento Grid
Mixed-size tiles in a tight, deliberate arrangement: one hero tile, a tall one, a wide one and small ones around them.
-
Product Page
Gallery, buy box and details — the e-commerce detail page skeleton.
-
Documentation Layout
Section nav on the left, prose in the middle, on-page table of contents on the right.
-
Split Screen Hero
Copy on one side, artwork on the other, flipping to stacked on mobile.
02. Method
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.
03. Export
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.
04. Learn
Learn the properties
What the generator writes, explained one property at a time.
- grid-template-areas
Name the regions of a layout and draw it as an ASCII map. The rules a valid map must follow, and how to redraw it per breakpoint.
- grid-template-columns
Every value a column can take: fr, minmax(), repeat(), and auto-fill vs auto-fit for columns that reflow without media queries.
- CSS Grid vs Flexbox
When to use each, a live side-by-side demo, and how the two combine on a real page.
- CSS Grid cheat sheet
Every container and item property, and every track value.
- CSS Grid visualizer
Paste grid CSS you already have and see the layout.
- CSS subgrid generator
Line nested items up with the parent grid.
05. Questions
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.What is the difference between grid-template-areas and grid-column?
Does CSS Grid break keyboard navigation?
Is this CSS grid generator free?
Can I use the generated grid in React?
className, and the Vue and Svelte tabs do the same for those frameworks. The plain CSS works in any of them too.