Click one cell then another to select a rectangle, name it, and get a ready-to-use grid-template-areas layout plus a grid-area rule for each region.
The grid-template-areas property lets you lay out a CSS grid visually, using repeated names to describe rectangular regions and a period for any cell that's left unnamed.
Every named area must form a solid rectangle of cells, which this tool enforces automatically.
Cells you never name are written as a period, matching the CSS specification exactly.
The output also includes grid-template-columns and grid-template-rows sized as equal fractions.
Each named region gets its own class with grid-area set, ready to apply to a child element.
Click one cell to start a selection, then click another cell to complete the rectangle between them, and enter a name when prompted.
No, naming a region overwrites any cells it covers, matching how grid-template-areas works: each cell can only belong to one named area.
A period represents an unnamed cell in grid-template-areas, exactly as the CSS specification defines it.
Click on any cell belonging to that area again and choose to clear it, or use Clear all to reset the whole grid.
Give the container the generated grid-template-areas and grid-template-columns/rows, then apply grid-area: name to the child element for each area.
More handy tools from My Panda Toolbox.