CSS grid-template-areas Property

The grid-template-areas property lets you define a visual template — a human-readable map — for laying out an element’s children inside a CSS Grid. Instead of thinking in terms of line numbers and spans, you give meaningful names to rectangular regions of the grid and describe how those regions fit together. This approach makes complex layouts easier to reason about and maintain because the arrangement is expressed as a spatial diagram rather than a set of numeric coordinates.

When you assign names in the template, child items can be placed by referring to those names, so placement becomes semantic: an item can claim the region named "sidebar" or "header" rather than being positioned by explicit start/end lines. Placing multiple items into the same named region results in them sharing that layout area (they are stacked in the same cells, subject to normal stacking rules). If a named area isn’t used by any child, it simply remains unused; conversely, a child that requests a name not present in the template won’t be positioned by the template and will follow the grid’s normal auto-placement behavior. You typically pair this property with explicit item placement using grid-area.

Because the template expresses the overall matrix of regions, it interacts with the grid’s track configuration and the fact that the element must be a grid container to take effect. The template determines how many columns and rows are considered when placing named regions, so it works together with the grid track sizing you set elsewhere (for example with grid-template-columns). Also, the property only affects elements that are using a grid layout, which you enable on the container via display. In practice, grid-template-areas is most powerful as a design-time and responsive tool: you can redefine the template at different breakpoints to rearrange large parts of the layout in a single, readable declaration.