CSS Grid Generator Formatter🔒 100% local

Build CSS grid layouts. Privacy-first, no server uploads, no tracking.

Input

CSS Grid Generator Formatter: related tools

Border Radius Preview Box Shadow Generator Code Heatmap

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.

CSS Grid Generator: 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.

CSS Grid Generator: worked example

repeat(3, 1fr), 1rembecomes

CSS 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, dashboard

The track count is read from the repeat() count for the '(3 tracks)' line.

dashboard, 24pxbecomes

CSS 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.

CSS Grid Generator: 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.

CSS Grid Generator: 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).

✨CSS Grid Generator Formatter🔒 100% local