Grid Generator / Playground
Build grid tracks and named template areas against a live preview and copy working CSS — entirely on this device.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}—
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div>
Do it offline:$ cat grid.css >> styles.css
How to use it
- Start with the tracks: add or remove columns and rows, then size each one — 1fr, 100px, auto, minmax() and fit-content() all validate.
- Turn on named areas to paint a template: name each cell, or a dot for an empty one, and the tool checks every area stays a rectangle.
- Set the gaps, the four alignment properties and grid-auto-flow; in track mode, place an item across lines or span several.
- Copy one block, copy the whole stylesheet, save it as grid.css, or share a link that reopens the exact grid.
Build column and row tracks from labeled controls, paint named areas onto a cell grid, and a live DOM preview repaints the instant anything changes — this is the browser's own grid engine, not a picture of one. Container CSS, per-area or per-item CSS and a matching HTML snippet stay in step, ready to copy or share as a link.
How it works
A grid is defined by its tracks: grid-template-columns and grid-template-rows list the sizes. The lines around them number from 1, and negatives count from the end — grid-column: 1 / -1 spans a whole row. Flexible fr tracks then share what remains after fixed sizes, gaps and content tracks resolve.
grid-template-areas names cells instead of counting lines: each string is a row, each token a cell, a run of dots an empty cell. css-grid-1 §7.3 requires every named area to form one solid rectangle — an L-shape or two split blocks is invalid, so the tool refuses it up front.
Examples
Preset: holy grail.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
gap: 16px;
}Header and footer each fill a whole row; nav, main and aside share the middle — every name a solid rectangle. Rows size auto, 1fr, auto.
Preset: responsive cards.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}One line does the responsive work: repeat(auto-fit, …) drops in as many 200px-minimum columns as fit, and minmax(200px, 1fr) stretches each to fill the row — no media query.
Preset: twelve-column grid.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
}Twelve equal columns fold into repeat(12, 1fr) — identical adjacent tracks collapse to a count. Turn collapsing off and twelve literal 1fr tokens print instead; it renders the same.
Preset: overlapping items.item:nth-child(1) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.item:nth-child(2) {
grid-column: 2 / 3;
grid-row: 2 / 3;
}Line placement lets two items hold the same cells: the first fills the 2×2 grid, the second sits bottom-right on top. Stacking is grid-only — flex items never overlap.
Every example on this page is executed against the same engine that powers the tool, on every build.
Gotchas worth knowing
Named areas must be rectangles
Every area must fill one solid rectangle. An L-shape, or two same-named blocks, is invalid CSS, so the tool flags it up front.
auto-fill keeps empty tracks, auto-fit collapses them
Both repeat as many columns as fit. auto-fill keeps the empty leftovers at their width; auto-fit collapses them, so filled items stretch across the row.
repeat() is only shorthand
Folding runs of the same track into repeat(n, size) is cosmetic — repeat(12, 1fr) equals twelve 1fr tokens. The toggle rewrites text, not layout.
All-auto rows stay implicit
When every row is auto and areas are off, grid-template-rows is dropped so rows fit their content. A sized row, or areas on, brings it back.
minmax() takes no flexible minimum
The lower bound of minmax() must be a length, percentage or auto — never an fr. minmax(1fr, 2fr) is refused; minmax(100px, 1fr) holds at 100px yet flexes upward.
A dot leaves a cell empty
A lone dot marks a cell in no area. Empty cells still occupy their track, so a dot carves a deliberate gap into a named layout.
fr shares whatever is left
Flexible fr tracks size last, after fixed lengths, gaps and content tracks. A 200px rail beside 1fr keeps its 200 pixels; the fr column takes the rest.
Subgrid and auto-track sizing are out of scope
This playground edits the explicit grid only. Subgrid, and sizing the implicit grid-auto-columns and grid-auto-rows tracks, are not simulated; grid-auto-flow direction is the one auto-placement control.
Common errors
`100` needs a unit — try `100px` or `1fr`.- Track sizes are the main free-text field, where a bare number is the commonest slip. The message returns your value with a unit; the last good grid holds meanwhile.
The `a` area must form a single solid rectangle — its cells are split or L-shaped.- A non-rectangular named area is invalid CSS, dropping the whole template. The tool names the area and omits the block rather than ship output the browser ignores.
Every row needs the same number of cells — row 2 has 1, not 2.- Each string in grid-template-areas must list the same cell count. The diagnostic points at the first row whose length differs and prints both numbers.
FAQ
How do I make a responsive grid without media queries?
Set the columns to auto-fit (or auto-fill) with a minmax() minimum, which prints repeat(auto-fit, minmax(200px, 1fr)). The grid fits as many 200-pixel columns as the container allows and stretches them across the row as the width changes. The responsive-cards preset loads exactly that.
What are grid-template-areas?
They name regions of the grid so you place items by name, not line number. Each quoted string is a row, each word a cell, and a dot an empty cell; an item sets grid-area: header to land there. Every named area has to form a solid rectangle, checked as you type.
Should I use CSS grid or flexbox?
Grid places items into rows and columns you define up front, so it owns two-dimensional layouts — page scaffolds, dashboards and image galleries. Flexbox flows a single row or column and lets content size itself, which suits navbars and toolbars. Reach for grid when both axes matter at once.
Keyboard shortcuts
- ⌘/Ctrl + C
- Copy all CSS while nothing is selected.
- ⌘/Ctrl + Shift + C
- Copy all CSS even over an active selection.
- ⌘/Ctrl + S
- Download the current CSS as grid.css.
- ? or ⌘/Ctrl + /
- Open the keyboard-help dialog.
- t
- Cycle the color theme.
- Esc
- Close the topmost dialog.