← All Tools
CSS Grid Generator Formatter🔒 100% local
Build CSS grid layouts. Privacy-first, no server uploads, no tracking.
The compact one: give it a column track list, optionally a gap and a row template, and it prints a .grid rule with sample markup and a keyword crib sheet. Commas inside functions such as repeat(3, 1fr) are protected during the split, so the template arrives intact, and a preset name typed in the column slot is expanded into its real track list first. It writes one rule and never reads or renders your page.
How to use it
- Enter columns first, gap second, rows third: repeat(3, 1fr), 1rem.
- Or put a preset name in the first slot - dashboard, sidebar, holy-grail, gallery, 12-col and the other names are listed at the end of the output.
- Press Process, then Copy Output to take the rule, the two-row sample markup and the track-sizing reference.
Worked example
repeat(3, 1fr), 1rembecomesCSS Grid: repeat(3, 1fr) (3 tracks)
CSS:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
HTML:
<div class="grid">
<div>1</div><div>2</div><div>3</div>
<div>4</div><div>5</div><div>6</div>
</div>
Track sizing keywords:
1fr one share of the free space
minmax(250px, 1fr) at least 250px, grow if there is room
auto-fill create as many tracks as fit, empty ones included
auto-fit same but collapses empty tracks (content stretches)
fit-content(300px) shrink-wrap the content, capped at 300px
Fixed track count: 3 per row. For responsive behaviour without media queries, try "repeat(auto-fit, minmax(250px, 1fr))".
Placing items anywhere:
.item { grid-column: 1 / 3; grid-row: 2; } (spans columns 1-2)
.item { grid-area: 1 / 1 / 3 / 3; } (row-start / col-start / row-end / col-end)
Built-in presets: holy-grail, 12-col, auto-fit, auto-fill, sidebar, gallery, dashboardThe track count is read from the repeat() count for the '(3 tracks)' line.
dashboard, 24pxbecomesCSS Grid: repeat(auto-fit, minmax(300px, 1fr)) (responsive, auto-sized tracks)
Preset "dashboard" expands to repeat(auto-fit, minmax(300px, 1fr))
CSS:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
... (the keyword crib sheet, placement examples and preset list follow)Preset expansion happens before validation, so 'dashboard' becomes repeat(auto-fit, minmax(300px, 1fr)) and gap 24px is kept as typed.
When to use it
- You know the column template you want and just need the rule typed out correctly.
- You keep forgetting the difference between auto-fit and auto-fill and want the explanation next to the CSS.
- You are sketching six boxes on a page and need placeholder markup and a gap value at the same time.
What it does not do
- Gap must be a single length. '1rem 2rem' and any other multi-value gap is refused, because a shorthand pair is not handled.
- The track list is accepted on a loose prefix test, so a typo that happens to start with a digit, auto or 1fr passes through into the CSS unchanged.
- Only the first three comma-separated fields are used - a fourth field is dropped without a message.
- Rows are copied verbatim from the third field, so '3' stays the literal 3 rather than becoming repeat(3, auto).