grid-area
Places a grid item into a named area or between given lines.
Syntax
grid-area: name;Values
| Parameter | Type | Description |
|---|---|---|
| name | ident | The name of an area from `grid-template-areas`. |
| row / column / row-end / column-end | lines | Line numbers: `1 / 1 / 3 / 3`. |
Examples
Items placed by area names, regardless of their order in the markup:
<style>
.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: "a a b"; gap: 6px; }
.grid div { padding: 8px; background: peachpuff; }
</style>
<div class="grid">
<div style="grid-area: b;">Placed in b</div>
<div style="grid-area: a;">Placed in a — two columns</div>
</div>Notes
The area name is written without quotes in grid-area and in quotes in grid-template-areas.
See also
- grid-template-areas — Draws the grid layout as a map of named areas.
- grid-column — Which columns a grid item occupies.
- grid-row — Which rows a grid item occupies.
Related recipes
In the tutorial
- Grid lines and areas — How to put an item in the right place of a grid — line numbers, grid-column and grid-row, span, named areas with grid-template-areas.