What does grid-template-areas do?
grid-template-areas sets a template of named areas in CSS Grid, so that elements are placed in the grid not by coordinates, but by names.
Example:
css
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 100px 1fr 80px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}Now the element can be placed like this:
css
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}Rules and features
- rows are described in quotes
- the number of names in each row must match the number of columns
- dots
.denote empty cells - the same area must be rectangular (not L-shaped)
Summary: grid-template-areas lets you define the layout with words, rather than row and column numbers, making the grid more visual and readable.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.