Pick a named area, click the grid to paint it. The tool emits the matching grid-template-areas string with rows aligned column-by-column, dot placeholders for empty cells, and validates that every named area forms a rectangle — anything else is illegal CSS and won't render.
grid-template-areas works
Each string in grid-template-areas describes one row of the grid; each whitespace-separated token in a string is one column cell. Use the same name across adjacent cells (horizontally or vertically) to merge them into a single area. Use a dot . for an empty cell. Then place children with grid-area: <name> and they snap to that region.
| Constraint | What the spec requires |
|---|---|
| Same column count per row | Every string must have the same number of tokens. Different counts → the whole declaration is invalid. |
| Rectangular areas | Every named area must form an axis-aligned rectangle. "a a" "b a" is fine. "a a" "a b" is fine. But "a b" "a a" is not — the a region would be L-shaped. |
| Empty cells | Use one or more dots (., .., ...) to mark a cell as empty. |
| Implicit named lines | An area named main automatically creates lines main-start and main-end on both axes — useful for sub-elements that don't sit exactly in the named area. |