Placing items in a grid with row and column numbers works, but becomes hard to reread weeks later: grid-column: 2 / 4 says nothing about what that area actually contains. grid-template-areas solves this by letting you name each zone of the grid directly in CSS, almost like a drawing.
This property reads like an ASCII art layout: you write the grid row by row, inside quotes, repeating the zone name for every cell it occupies. Each child is then attached to a zone with grid-area, instead of numeric coordinates.
Definition
grid-template-areas names rectangular zones of a CSS Grid grid, sketching their layout with text instead of counting row and column numbers. Each child is then matched to a zone with the grid-area property, which simply takes the chosen name. It is an alternative to grid-column and grid-row, built for layouts where the structure benefits from being readable at a glance.
Syntax: drawing the grid in text
.page {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-areas: "header header" "menu content" "footer footer";
}
.header {
grid-area: header;
}
.menu {
grid-area: menu;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}Each quoted line represents one row of the grid, and each word one cell. Here, header spans both columns of the first row, menu and content share the second row, and footer again spans the full width. The number of words per line must match the number of columns set by grid-template-columns, here two.
Reorganizing the whole layout by screen size
.page {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "header" "content" "menu" "footer";
}
@media (min-width: 900px) {
.page {
grid-template-columns: 240px 1fr;
grid-template-areas: "header header" "menu content" "footer footer";
}
}On a small screen, the layout stacks the zones in a logical order for vertical reading, with a single column. Past 900 pixels wide, a Media query completely redefines grid-template-areas to bring in the sidebar and reorganize the zones into two columns. The HTML itself does not change a single line: only the visual arrangement switches from one plan to the other.
This is one of the strongest arguments for grid-template-areas over line numbers: completely redrawing a layout for another screen only requires rewriting the text inside the quotes, without recalculating a single grid line number.
The rule of the rectangular shape
A named zone must always form a solid rectangle, with no gaps and no L or cross shapes. A single dot marks a cell that is deliberately left empty, belonging to no zone at all.
grid-template-areas declaration. No error shows up in the console: the grid silently falls back to automatic placement, which makes the bug hard to spot without inspecting the element.Why it reads better than numbers
With row numbers, understanding a page's structure means mentally reconstructing the grid from several separate declarations. With grid-template-areas, the entire structure is visible in one block, in the order the zones actually appear on screen. This is especially useful for layouts that change with screen size, where you redefine grid-template-areas inside a media query to fully reorganize the zones without touching the HTML.
Frequently asked questions
No. Cells you do not want to name are marked with a dot, leaving them empty and available for automatic placement, or simply unused. Only cells that need to host a specific item require a name.
grid-template-areas without grid-template-columns?Technically yes, but in practice the two always go together: without grid-template-columns, the number and width of the columns are undefined, and the zone names alone do not tell the browser how wide each column of the layout should be.
No, the two are completely independent. The name given in grid-template-areas is a free identifier, chosen only to be readable: it has no automatic link to class names or HTML tags, it just serves as a reference for the grid-area property.