CSS Grid Generator
Build a CSS grid layout visually — columns, rows, gaps, and per-cell spans — with copy-ready CSS
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, minmax(60px, auto));
gap: 12px;
justify-items: stretch;
align-items: stretch;
}About this tool
The ToolNinja CSS Grid Generator builds a grid-template-columns/rows layout visually — equal fr-unit columns or a responsive repeat(auto-fit, minmax()) track, configurable rows, gap, and item alignment — plus per-cell grid-column/grid-row spans on an individually selected cell, with a live preview and copy-ready CSS. The responsive track mode demonstrates the single most useful CSS Grid pattern most developers reach for in practice: repeat(auto-fit, minmax(Npx, 1fr)), which produces a card/gallery layout that reflows its column count automatically as the container resizes, with zero media queries. The spanning controls demonstrate the other core Grid feature CSS alone can't easily replicate with Flexbox: making one specific cell deliberately wider or taller than its neighbors. Everything runs 100% in your browser — the preview is live CSS Grid, not a simulation, so the generated code behaves exactly like what you see.
When to use it
- →Building a responsive card or image gallery layout that reflows columns without media queries
- →Prototyping a dashboard layout where one cell needs to span multiple columns or rows
- →Understanding how auto-fit and minmax() interact to produce a responsive grid
- →Generating a starting grid-template-columns value for a design you already have in mind
Tips
- ◆repeat(auto-fit, minmax(200px, 1fr)) — the 'Responsive' track mode — is the single most reusable CSS Grid pattern: it reflows column count automatically as the container resizes, no media queries required.
- ◆grid-column: span N and grid-row: span N (shown here when you widen the selected cell) only affect that one cell — every other cell keeps occupying exactly one track.
- ◆justify-items/align-items position content within each cell; they're unrelated to justify-content/align-content, which position the grid's tracks within the container when the grid is smaller than its container.
Frequently asked questions
What does repeat(auto-fit, minmax(200px, 1fr)) actually do?
It tells the browser to fit as many 1fr-wide columns as possible, with each column never shrinking below 200px — so as the container narrows, columns reflow onto new rows automatically, and as it widens, existing columns stretch to fill the extra space. It's the standard zero-media-query way to build a responsive card grid.
What's the difference between auto-fit and auto-fill?
Both create as many tracks as fit, but auto-fit collapses any empty tracks to zero width once there's no content left to fill them (so existing items stretch to use the freed space), while auto-fill keeps those empty tracks at their minmax() width (so items stay their intended size and just leave visible gaps). auto-fit is what most people actually want for a responsive gallery.
Why use grid-column: span 2 instead of just making an item wider with CSS width?
span works in track units, not pixels — the spanning cell always occupies exactly that many of the grid's own columns, staying perfectly aligned to the grid regardless of how wide those columns currently are (which changes as the container resizes). A manual width in pixels or percent doesn't stay locked to the grid's actual column boundaries the same way.