---
layout: single
property_name: grid-template
---
Shorthand property for
No rows, columns, or areas are defined.
You can define rows first, columns second, by splitting them with a slash
You can define both areas and rows and columns dimensions. In this case, each set of areas have a row size attached to it. The first row is
#grid-template
grid-template-rows grid-template-columns and grid-template-area.default
grid-template: none;
grid-template: 200px 1fr / 100px auto 3rem;
/.grid-template: "header header header" 50px "sidebar main main" 200px / 100px auto;
50px high, the second one is 200px high. The sidebar column is 100px wide, while the main column's width is set to auto and takes up the remaining width.