New! My 44-page ebook "CSS in 44 minutes" is out! 😃
#grid-auto-rows
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.