grid-template-areas
grid-template-areas draws the layout of the grid cells as text and names areas of cells. An item with grid-area: name is placed in that area.
Syntax
none | <string>+Preview
Code
.box {
display: grid;
grid-template-areas: "head head" "side main" "foot foot";
}Controls
About
Writing the value
none: the initial value. No areas are named.- Write each row as one string in quotes, such as
"head head", and list one string per row. Inside a string, separate the cell names with spaces. Cells with the same name form one area. .(or several in a row) is a cell that belongs to no area.- Every row needs the same number of cells, and the cells sharing a name must form a rectangle. An L shape or a split area makes the whole declaration invalid.
The number of strings and cells also sets how many rows and columns there are. Size them with grid-template-rows and grid-template-columns; without those, they fit their content (auto).
The preview makes the box display: grid with a helper declaration. The four sample items have grid-area: head, side, main, and foot (not shown in the code).
When to use it
Use it to build the frame of a page, with a header, a sidebar, the main content, and a footer. Rewriting only the strings in a media query rearranges the layout without touching the HTML order: stacked on narrow screens, with the sidebar beside the content on wide ones.
Watch out
- Naming an area also names its lines
head-startandhead-end, so you can use them as line names, as in grid-column: head-start / head-end. - If no area has the name written on an item, the item is placed outside, in rows and columns added to the grid. Watch for typos in the names.
- Rearranging does not change the reading or keyboard order, which follows the HTML, so keep the visual order close to it.