Skip to content

CSS Grid Generator

Visually compose grid-template-columns, rows, and named areas. Click cells to paint regions and copy minimal CSS plus matching Tailwind utility classes.

CSS Grid Generator

Named areas

Click an area, then click cells in the preview to paint regions.

Columns (3)

1
2
3

Rows (3)

1
2
3

Live preview

Grid: 3 columns, 3 rows

CSS output

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  gap: 8px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Tailwind utilities

grid [grid-template-columns:1fr_2fr_1fr] [grid-template-rows:80px_1fr_60px] gap-2

Arbitrary-value brackets are emitted when tracks deviate from a uniform 1fr pattern.

Updated . Provided as is. Check the output before you rely on it in production.

How to use CSS Grid Generator

  1. 1

    Define track sizes

    Use the Columns and Rows panels to set track sizes. Type any valid CSS value — 1fr, 200px, minmax(0, 1fr), auto — or pick from the preset datalist suggestions.

  2. 2

    Name your areas

    Add a named area in the Named Areas panel. Each area gets a color swatch. Click an area to make it the active painter for the next cell click in the preview.

  3. 3

    Paint cells in the preview

    Click any cell in the live grid to assign the active area. Click again to clear. The grid-template-areas string updates in real time alongside the visual layout.

  4. 4

    Copy CSS or Tailwind

    Grab the minimal CSS block including grid-template-columns, rows, areas, and gap. The Tailwind panel emits utility classes, falling back to arbitrary-value brackets for non-uniform tracks.

Questions and answers

What is CSS Grid Generator?
CSS Grid is a two-dimensional layout system: grid-template-columns and grid-template-rows set the tracks, and grid-template-areas names regions across them. This generator lets you define tracks with any valid size, click cells to paint named areas on a live preview, and copy the CSS plus matching Tailwind classes.
Can I use any track size, including minmax and clamp?
Yes. The size inputs accept any valid CSS grid track value — 1fr, auto, min-content, max-content, 200px, minmax(0, 1fr), and clamp() expressions all work without preset restrictions.
How does Tailwind output handle non-uniform tracks?
When all tracks are 1fr the output uses grid-cols-N and grid-rows-N utilities. For mixed tracks it falls back to arbitrary-value brackets so the underlying grid-template-columns string is preserved exactly.
Does it send my data to a server?
No. The generator runs entirely in your browser. Your track definitions, named areas, and copied CSS never leave the page.
Why click-to-paint instead of drag for areas?
Click-to-paint with an active area selector is faster for the common case (rect-shaped regions) and avoids drag-state bugs. Each cell can only belong to one area, matching how grid-template-areas actually works.
For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

Best Path For Builders

Browser workflow

Runs instantly in the browser with private local processing and copy/export-ready output.

Browser Workflow

This tool is optimized for instant in-browser execution with local data handling. Run it here and copy/export the output directly.

/css-grid-generator/

For automation planning, fetch the canonical contract at /api/tool/css-grid-generator.json.