CSS Grid Generator

Compose a CSS Grid layout in your browser. Type values for each column and row track (fr, px, %, auto, minmax, fit-content), pick gaps, and watch the preview render with numbered cells. Copy the finished rule with one click. Pure client-side, no upload.

Columns 3 tracks
Rows 2 tracks
Presets
Gap and alignment
Live preview — cells
CSS output 
display: grid;

Drop this into a selector that matches your container. Defaults (justify-items, align-items, grid-auto-flow, zero gaps) are omitted to keep the output tidy.

Quick reference
1fr

One flexible share of the remaining space. 2fr is twice as wide as 1fr.

auto

The column shrinks to its content's min/max size.

minmax(200px, 1fr)

At least 200 px, but grows to share leftover space.

fit-content(300px)

Shrinks to the content but caps at 300 px.

repeat(auto-fit, minmax(180px, 1fr))

Responsive cards. As many columns as fit, never narrower than 180 px.

[name] 1fr [name-end]

Named lines for child placement via grid-column: name / name-end.