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

Get it now →


Defines the size of grid rows that were created implicitly: it means that grid-auto-rows targets the rows that were not defined with grid-template-rows or grid-template-areas.

default grid-auto-rows: auto;

The implicity-created rows have an auto size.

grid-auto-rows: 100px;

Here we combine grid-template-areas: "header header header" "sidebar main main" "footer footer footer" with grid-template-rows: 50px 200px.

In this situation, the grid-template-areas defines 3 rows, while the grid-template-rows only defines 2 row heights.

As a result, the third row height (the footer) takes its value from the grid-auto-rows property: 100px.