grid-template-areas
Draws the grid layout as a map of named areas.
Syntax
grid-template-areas: "a a" "b c";Values
| Parameter | Type | Description |
|---|---|---|
| "names" | string | One string per row, one name per column; repeating a name stretches the area. |
| . | empty cell | An empty cell. |
Examples
A page with a header, a menu and content:
<style>
.page {
display: grid;
grid-template-columns: 100px 1fr;
grid-template-areas:
"head head"
"side main";
gap: 6px;
}
.page > * { padding: 8px; background: lightskyblue; }
</style>
<div class="page">
<div style="grid-area: head;">Header</div>
<div style="grid-area: side;">Menu</div>
<div style="grid-area: main;">Content</div>
</div>Notes
Areas must be rectangles. The beauty of this approach is in media queries: to change the layout for a phone, redefine only grid-template-areas.
See also
- grid-area — Places a grid item into a named area or between given lines.
- grid-template-columns — The number and widths of the columns of a grid.
- @media — Applies rules only under given conditions — the window width, the system theme and others.
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.