CSS

CSS Grid Generator

Build a CSS Grid layout with per-track column/row sizes (fr/px/%/auto), separate row/column gap, justify/align items and content, auto-flow, a responsive auto-fit mode, named grid-template-areas (with Holy Grail / Dashboard / Sidebar presets), and export as CSS, Tailwind, SCSS or React.

What this tool does

Builds a complete display: grid layout visually — track sizes, gaps, alignment, and named grid-template-areas — with a live preview showing the actual cell arrangement rather than just the generated CSS text.

Track sizing

Add, remove, and size any number of column and row tracks independently, each in fr, px, %, or auto — mixing units freely, the same way real CSS Grid does (a fixed-width sidebar column next to a flexible 1fr content column, for example).

Named grid areas

A text area accepts one quoted row per line to define grid-template-areas directly — typing 'header header' / 'sidebar content' builds a two-row layout with named regions, and the preview labels each cell with its area name so the layout is easy to verify at a glance. Three built-in presets — Holy Grail (header/ nav/main/aside/footer), Sidebar, and a 4-column Dashboard — set up common structures instantly, alongside a responsive auto-fit preset that switches to repeat(auto-fit, minmax(...)) for a card grid that reflows without a media query.

Gaps, alignment and flow

Row and column gap are set independently. Justify/align items and justify/align content cover both axes of grid alignment, and auto-flow (row, column, or the dense variants) controls how implicit items get placed.

Getting the CSS out

Export as plain CSS, a Tailwind arbitrary-value class string, SCSS, or a React inline style object, copyable with one click.

Privacy

Everything runs locally in your browser -- nothing you build is sent to a server.

FAQ

Frequently asked questions

Is my data uploaded anywhere?

No. The grid is built and rendered entirely in the browser -- nothing is sent to a server.

Can I mix different units for different tracks?

Yes -- each column and row track has its own unit (fr, px, %, or auto), so a fixed-width sidebar next to a flexible fr content column works exactly as it does in real CSS Grid.

How do I define named grid areas?

Type one quoted row per line in the Grid Template Areas field, the same syntax as the real grid-template-areas property -- the preview then labels each resulting cell with its area name.

What layout presets are available?

Holy Grail (header, nav, main, aside, footer), Sidebar, a 4-column Dashboard, and a responsive Auto-fit Cards preset that switches to repeat(auto-fit, minmax(...)) for a reflowing card grid with no media query.

Can column and row gaps be set separately?

Yes -- row gap and column gap have independent controls, collapsing to a single shorthand gap value in the generated CSS only when they happen to match.

What export formats are available?

Plain CSS, a Tailwind arbitrary-value class string, SCSS, or a React inline style object -- selectable from a dropdown next to the code output.