CSS Grid Generator

The CSS Grid Generator lets you compose a grid container by dragging sliders instead of memorising syntax.

Choose how many columns and rows you want, pick a track size such as 1fr, auto, min-content or max-content, and set the gap, and the tool writes a clean .grid rule using grid-template-columns, grid-template-rows and gap.

A live preview renders numbered cells exactly as the browser would lay them out, so you can see the structure take shape as you adjust it.

When a simple equal-track grid is not enough, you can type a raw template into the custom columns or rows field — for example "200px 1fr 1fr" for a fixed sidebar beside two flexible content columns, or "auto 1fr" to pin a header above a stretchy body.

The custom value overrides the slider for that axis and is reflected in both the preview and the generated CSS, and the cell counter understands repeat() notation so the preview stays accurate.

Every value is validated, so an out-of-range count or gap produces a calm message instead of broken CSS.

The whole thing runs locally in your browser — nothing is uploaded or stored — and the resulting CSS copies to your clipboard in one click, ready to paste into a stylesheet or component.