CSS Grid Builder
Lays out a grid visually with named areas and emits the grid-template CSS.
Paints named areas onto a grid by clicking cells, checks them against the spec’s rectangle rule, and emits `grid-template-areas` — or line numbers if you prefer. The check matters because an invalid area list is thrown out silently, with no error anywhere.
Grid
A size cell accepts 1fr·240px·auto·minmax(200px, 1fr).
Click a cell to give it the area name below. Click one cell then another and the rectangle between them is filled as one area. Clicking a cell of the same name again empties it.
CSS
Preview
There is one rule to remember
A named area has to be a rectangle (CSS Grid Level 2 §7.3.1). Make an L shape and the whole grid-template-areas is thrown out with no error at all, which is why this tool tells you before it writes the CSS. Three or more identical tracks in a row are written with repeat().
For a one-dimensional layout, the flexbox playground is simpler.
How to use it
Start from a layout
Header-sidebar-main-footer, a card row, a dashboard, a centred article. Or build your own from an empty grid.
Name an area and click the cells
Type the name, then click. Click one cell and then another to fill the rectangle between them; click a cell of the same name again to clear it.
Set the track sizes
The boxes along the top and left take `1fr`, `240px`, `auto` or `minmax(200px, 1fr)`. Three or more identical tracks are written with `repeat()`.
Common questions
Why does my L-shaped area not work?
Because a named area has to be a rectangle — CSS Grid Level 2 §7.3.1. If it is not, the whole `grid-template-areas` declaration is invalid and the browser drops it with no error at all. This tool tells you before it writes the CSS, which is the only warning you will get.
Named areas or line numbers?
Areas read better and survive a track being inserted. Line numbers are the only option when an item spans a track that does not exist in every breakpoint, or when the grid is generated. The toggle writes either.
How do I leave a cell empty?
Do not give it a name. It is written as `.` in the template, which is the spec’s null cell token — one dot per empty cell, and a run of them still has to leave every named area rectangular.
Why does `fr` not shrink below the content?
Because `1fr` means `minmax(auto, 1fr)`, and that `auto` minimum is the content size. Use `minmax(0, 1fr)` when you want a track that really can go narrower than what is in it — the classic fix for a grid child that refuses to shrink.
Feed it from
Next
These accept what this tool produces, so the result can go straight in.
Fluid Size Calculator
Computes a clamp() expression that scales a size smoothly between two viewport widths.
CSS Beautifier & Minifier
Formats or minifies CSS without reordering anything, preserving the token stream exactly.
Flexbox Playground
Toggles every flex property on a live example and shows the CSS and what each property changed.
Colour Format Converter
Converts a colour between HEX, RGB, HSL, HWB, LAB, LCH and OKLCH and names the nearest known colour.
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.
Contrast Checker
Scores a foreground and background pair against WCAG 2 and APCA and suggests the nearest passing colour.