← All Tools
CSS Grid Playground Formatter🔒 100% local
Experiment with CSS grid. Privacy-first, no server uploads, no tracking.
A slash-separated shorthand for a whole layout: the column spec first, then options such as gap, rows, flow and areas, and it returns the grid CSS with the lines that matter annotated plus layout commentary. Unlike the bare column formatter, this one validates the track list, expands a bare column count into repeat(n, 1fr), and can infer the column count from a grid-template-areas map so the two declarations agree.
How to use it
- Start with the columns: 3, 200px 1fr 1fr, or repeat(auto-fit,minmax(240px,1fr)).
- Add options separated by slashes: gap 20px, rows 3, flow row dense, or areas "header header" "sidebar main".
- Leave the box empty and press Process to get the format cheat-sheet instead of an error message.
Worked example
repeat(auto-fit,minmax(240px,1fr)) / gap 20pxbecomes.grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
gap: 20px;
}
How to read this:
• grid-template-columns defines the tracks; children fill them in order unless placed explicitly.
• Implicit rows are created automatically for overflow items — control them with grid-auto-rows.
• Explicit placement beats source order, which is why grid can reorder without the accessibility problems tab-order tricks cause.
Notes for this layout:
• auto-fit collapses empty tracks, so items stretch to fill the row. auto-fill keeps the empty tracks, so items stay at minmax width and leave gaps at the end. Usually auto-fit is what you want.
• The minmax minimum (240px) is effectively your breakpoint: below that width the track stops shrinking and the column count drops. That is why this needs no media queries.
• remember the gap when picking the minimum: with a 16px gap and 3 columns you lose 32px of total width before the tracks are sized.
• gap replaces the old negative-margin + width: calc(33.33% - 1rem) hack entirely — grid gap is subtracted from the track sizing automatically, so tracks never overflow.
• fr is a fraction of the FREE space, not a percentage: 1fr 2fr splits leftover space 1:2 after fixed tracks and gaps are taken out.
• grid-auto-rows: minmax(0, auto) or a fixed row height prevents the classic "one cell with a long word blows up the whole row" problem.
• Subgrid (widely supported since 2023) lets nested grids share the parent tracks — often better than nesting a second full grid.
Grid vs flexbox: grid for the page skeleton and any two-dimensional layout; flexbox for a toolbar, a row of buttons, or anything one-dimensional where wrapping is enough.auto-fit is detected and the minmax minimum is quoted back as the effective breakpoint.
areas "header header" "sidebar main" / gap 12pxbecomes.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
/* grid-template-areas — the map IS the layout. "." leaves a cell empty. */
.grid {
grid-template-areas:
"header header"
"sidebar main"
;
}
/* Each area becomes a named placement: */
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
... (the reading guide, per-layout notes and the grid-vs-flexbox paragraph follow)With no column spec typed, the tracks are inferred from the widest area row - 2 here - so the areas map lines up.
When to use it
- You are starting a page skeleton and want the areas map and its named placements written out together.
- You want a plain-English explanation of what each line of the grid CSS is doing.
- You are checking a responsive card grid and want the minmax minimum treated as a breakpoint.
What it does not do
- A bare number in an option slot becomes a gap in pixels, so 3 / 16 sets gap: 16px rather than spacing in any other unit.
- flow accepts only row, column, dense, row dense or column dense; anything else throws instead of being passed through.
- An uneven areas map is not repaired or refused - the CSS is printed, the mismatched rows would be dropped by the browser, and a warning line is appended below.
- Column count is capped at 24, and the check that compares a typed track count against the area map width is skipped when you lead with areas and omit the column spec.