A grid area is a rectangle made of one or more grid cells. Naming areas lets you place page regions without counting grid lines: draw the arrangement on the grid container with `grid-template-areas`, then assign each item to a name with `grid-area`. section 5.2 section 5.3.2
Lay out a page by region
Use `grid-template-areas: "title title" "nav nav" "main aside1" "main aside2";` on the container. Each quoted string is a row, and each name occupies a column. Set `grid-area: main` on the main item: the repeated `main` entries give it the left column across two rows. Assign the header, navigation, and sidebar items their corresponding names. section 5.3.2
Two details matter when drawing the template:
- Every named area must be rectangular; an L- or U-shaped region is not valid. section 5.3.2
- Use a period for a cell you want to leave empty. section 5.3.2
Named areas are an alternative to placement by numbered or named grid lines, not a different layout result. Choose the syntax that makes a particular design easiest to read. When the regions are known in advance, the template makes their arrangement especially clear. A separate named-line technique can also define an area between matching `-start` and `-end` lines. section 5.3 section 5.3.1 section 5.3.2
Listing 5.7 Using named grid areas
.container {
display: grid;
grid-template-areas:
"title title" #1
"nav nav" #1
"main aside1" #1
"main aside2"; #1
grid-template-columns: 2fr 1fr; #2
grid-template-rows: repeat(4, auto); #2
grid-gap: var(--gap-size);
max-inline-size: 1080px;
margin-inline: auto;
}
header {
grid-area: title; #3
}
nav {
grid-area: nav; #3
}
.main {
grid-area: main; #3
}
.sidebar-top {
grid-area: aside1; #3
}
.sidebar-bottom {
grid-area: aside2; #3
}
The complete CSS listing pairs each region in a four-row template with the grid item assigned to it. section 5.3.2
