The CSS Grid `grid-template-areas` property gives a layout readable names instead of forcing you to place every item by numeric row and column lines. Each quoted string describes one row, and each name inside it describes a column. Assign the matching names to child elements with `grid-area`; defining the template alone does not move content into those areas. section 2.4 section 2.7
Keep these rules in mind when designing a named-area layout:
- Repeat a name across adjacent cells to make one larger area; all cells with that name must form a rectangle, not an L shape. section 2.4
- Use a dot (`.`) for an intentionally empty cell; unnamed cells cannot receive content. section 2.4
- Use media queries to replace the area arrangement at a breakpoint, changing the visual layout with relatively little code. section 2.5
- Check that the source order, visual order, and keyboard tab order remain logically aligned, using browser developer tools when necessary. section 2.5 section 2.7
A named page layout
A three-column page can name its regions directly: `"header header header"`, `"content content author"`, `"content content aside"`, `"plays . aside"`, and `"footer footer footer"`. The parent grid then assigns `header`, `content`, `author`, `aside`, `plays`, and `footer` to child elements through `grid-area`. For screens at least 955px wide, a media query can redefine the middle rows as `"content author aside"` and `"content plays aside"`, while changing the columns to three equal fractions.
Listing 2.5 Creating our template areas
main {
display: grid;
grid-template-columns: repeat(2, minmax(auto, 1fr)) 250px;
grid-template-areas:
"header header header"
"content content author"
"content content aside "
"plays . aside "
"footer footer footer";
}
View the complete template-area declaration, including named rows, repeated regions, and an intentionally empty cell. section 2.4
