Suggest an editImprove this articleRefine the answer for “What does grid-template-areas do?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**`grid-template-areas`** sets a template of named areas in CSS Grid, so elements are placed not by coordinates but by names, for example via `grid-area: header`. **Key point:** `grid-template-areas` lets you define the layout with words, rather than row and column numbers, making the grid more visual.Shown above the full answer for quick recall.Answer (EN)Image`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.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.