New! My 44-page ebook "CSS in 44 minutes" is out! 😃
#grid-template
Shorthand property for grid-template-rows
grid-template-columns
and grid-template-area
.
default
grid-template: none;
No rows, columns, or areas are defined.
grid-template: 200px 1fr / 100px auto 3rem;
You can define rows first, columns second, by splitting them with a slash /
.
grid-template: "header header header" 50px "sidebar main main" 200px / 100px auto;
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 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.