CSS Grid Studio

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?

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 after fixed-size tracks 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.