Generate CSS Grid layouts — equal columns, the auto-fit responsive pattern that needs no media queries, or a full page layout with named grid areas — previewed live.
Generated locally in your browser — your colors, settings and code never leave this page.
Three grid patterns cover most layouts
Equal columns for galleries and card lists. Auto-fit — repeat(auto-fit, minmax(220px, 1fr)) — for responsive grids that need zero media queries: columns appear and disappear as space allows. Named areas for whole-page shells where the CSS literally draws the layout. Pick one, tune it against the live preview, copy.
Worked example (named areas)
.grid-container {
display: grid;
min-height: 100vh;
grid-template: auto 1fr auto / 220px 1fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 12px;
}
.header { grid-area: header; } .main { grid-area: main; }auto-fit vs auto-fill — the one-word difference
- With few items, auto-fit stretches them across the row; auto-fill keeps empty tracks so items hold their size. Card grids usually want fit; strict rhythm wants fill. The output notes which you have.
Why grid-template-areas age well
- The layout is self-documenting ASCII art — rearranging the page means editing the picture, and responsive re-flows are just a different areas string under a media query.
Related
- Utility-class form: the Tailwind Grid Generator. One-dimensional layouts: Flexbox.
How to use the CSS Grid Generator
- Pick a layout: equal columns, auto-fit responsive, or the named-areas page shell.
- Tune columns, gap and (for auto-fit) the minimum column width.
- Copy the CSS — the areas layout includes the child assignments.
Frequently asked questions
What is the auto-fit pattern and why is it loved?
repeat(auto-fit, minmax(220px, 1fr)) — columns appear and disappear as the container resizes, no media queries at all. It is the one-liner behind most modern card grids.
auto-fit or auto-fill?
With few items, auto-fit stretches them to fill the row; auto-fill reserves empty tracks so items keep their size. Card grids usually want fit; strict column rhythms want fill.
What are grid-template-areas?
ASCII-art layout: name each region in strings ("header header" / "sidebar main"), then assign children by name. Self-documenting, and rearranging the page means editing the picture.
