Suggest an editImprove this articleRefine the answer for “What does the grid-template property do?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**`grid-template`** is a shorthand that combines `grid-template-rows`, `grid-template-columns`, and `grid-template-areas` into one declaration, letting you set rows, columns, and named grid areas at the same time. **Key point:** `grid-template` is a convenient combined notation that lets you set the structure of rows, columns, and areas in Grid with a single property.Shown above the full answer for quick recall.Answer (EN)Image`grid-template` is a **shorthand** that combines three properties into one: - `grid-template-rows` - `grid-template-columns` - `grid-template-areas` That is, with it you can **set rows, columns, and named grid areas at the same time**. Example: ```css .container { display: grid; grid-template: "header header" 100px "sidebar main" 1fr "footer footer" 80px / 200px 1fr; } ``` Equivalent to three separate declarations: ```css grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-rows: 100px 1fr 80px; grid-template-columns: 200px 1fr; ``` **Summary:** `grid-template` is a convenient combined notation that lets you set the structure of rows, columns, and areas in Grid with a single property.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.