CSS grid-area Property

The grid-area property is used on grid items to control where an item sits in the grid and how many tracks it covers. It acts as a compact way to define both the item's placement by grid lines and its association with named template areas, so authors can position elements either by explicit line references or by matching names declared on the grid container. Because it sets both row and column placement in one declaration, it is a convenient tool when you want to describe an item's footprint in the layout in a single place.

Conceptually, grid-area maps to the item's row and column start/end boundaries and therefore ties into the row- and column-related placement properties; see grid-row and grid-column. That relationship means changes to the grid’s track sizing or to the named areas on the container can change how a previously specified area behaves, because the item’s extent is defined relative to the grid’s lines and named regions. Using it to span multiple rows or columns causes the grid item to occupy the combined space of those tracks, which in turn affects layout flow, available space for neighboring items, and automatic track sizing.

In practice, grid-area interacts with the grid container’s area definitions and the auto-placement algorithm: if an item’s name corresponds to a named area on the container, it will be placed into that area; otherwise explicit line placements take effect and the auto-placement rules resolve conflicts or free slots. It does not control an item’s alignment inside its assigned grid area — that is handled by properties such as justify-self and align-self — and it is only meaningful when the parent is a grid (see display for grid container types).