CSS workflow
CSS Grid areas: visual layout, tracks and source order
CSS Grid lets you place content in named regions. A visual map can make those regions easy to sketch, but the rendered size and reading order still depend on your HTML and content.
Content updated: · Maintainer and corrections
Draw complete rectangles
Each quoted row in grid-template-areas must have the same number of cells. Repeat a name across adjacent cells to span tracks; a dot leaves one cell unnamed. A named area must form one filled rectangle. An L shape or disconnected cells invalidate the declaration.
The editor stores each area as a rectangle and rejects overlap. It does not parse arbitrary CSS. A name uses a restricted lowercase identifier so generated CSS and HTML remain predictable.
Read tracks and gaps separately
Columns and rows are tracks. fr shares available space, px fixes a track size, auto responds to content, and minmax(0, 1fr) removes the automatic minimum from the flexible track. The result still depends on the containing element, actual content and the rest of your styles.
The editor's square-cell map shows only area positions. Its rendered preview applies the generated tracks, areas and gaps to sample cards. Those cards have demonstration styling; copied layout CSS does not set their typography, padding or content. Changing the preview container width does not generate a media query.
Keep HTML order meaningful
Grid placement changes visual position, not document order. Screen readers and keyboard navigation follow HTML order. The generator outputs areas from top to bottom and left to right as a starting point, but that may not be the right reading order for your content.
Before shipping, read the HTML without CSS, move through interactive content with Tab, then repeat at narrow widths and 200% zoom. Keep headings and controls in a logical sequence instead of relying on visual placement or positive tabindex to repair it.
Know the editor limits
The editor handles one grid, at most eight columns, eight rows and sixteen named areas. It supports structured fr, px, auto and minmax(0, fr) track choices, plus integer gaps from 0 to 128px. These are editor limits, not CSS specification limits.
It does not create responsive breakpoints, nested grids, subgrid, masonry, arbitrary CSS imports or saved projects. Use the output as a starting layout and test overflow, content growth, source order and browser support in the receiving site.
.layout {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-areas:
"header header"
"sidebar main";
}
.layout > .header { grid-area: header; }Data provenance