CSS Grid Studio

What is CSS Grid Studio?

CSS Grid is a browser layout system for arranging elements into rows and columns, like a spreadsheet — instead of stacking things with floats or flexbox tricks. CSS Grid Studio lets you design a grid layout visually (set rows, columns, gaps and named areas by clicking and dragging) and copy the exact, ready-to-use CSS it generates, without hand-writing the grid syntax yourself.

How to use CSS Grid Studio

1. Set the number of Rows and Columns, and the row/column gap, in the Layout panel.
2. Name an area (e.g. "header") in the area field and click Add, then click or drag across cells in the Preview to paint that area onto them.
3. Repeat for each area you need (sidebar, main, footer, etc.).
4. Watch the Generated CSS panel update live as you paint.
5. Click Copy to copy the finished CSS to your clipboard.

How CSS Grid areas work

grid-template-areas lets you name regions of a grid and lay them out as a visual map — one quoted string per row, each word naming which area that cell belongs to, and a period (.) for an empty cell. Every named area must form a solid rectangle; the browser rejects the whole declaration otherwise:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  grid-template-areas:
    "header header header"
    "sidebar main main";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }

The fr unit distributes leftover space after fixed-size tracks (like px) are subtracted — a 2fr track takes twice the leftover space of a 1fr track. This tool generates all of it from what you paint, per the W3C CSS Grid Layout Module Level 2 spec — no external libraries.

Frequently asked questions

What is grid-template-areas?

It's a CSS Grid property that lets you name regions of your grid and lay them out as a visual ASCII-art map, one quoted string per row, instead of positioning every item by row/column numbers.

What does the fr unit mean?

fr stands for "fraction." A track sized 1fr takes one share of the leftover space in the grid after fixed-size tracks (like px) are subtracted; 2fr takes twice as much leftover space as 1fr.

Why does my area not generate valid CSS?

grid-template-areas requires every named area to form a solid rectangle of cells. If you paint a non-rectangular shape, this tool flags it and excludes it from the generated CSS instead of shipping a broken declaration.

Can I export just the grid-template-areas string?

Yes, it's included at the top of the generated CSS block alongside grid-template-columns, grid-template-rows and gap, plus one grid-area rule per named area.