New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →


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.