Understanding `grid-auto-rows` and `grid-auto-columns`

Until now, I was under the impression that the grid-auto-rows and grid-auto-columns properties size only the implicit grid tracks.

Today I learned from the spec:

The grid-auto-rows and grid-auto-columns properties size these implicit grid tracks, as well as any explicit grid tracks created by grid-template-areas but not explicitly sized by grid-template-rows or grid-template-columns

Simply put, the grid-auto-columns and grid-auto-rows properties specify the size of tracks not assigned a size by grid-template-rows or grid-template-columns.

In the following demo, we define an explicit grid with 2 columns and 5 rows using grid-template-areas. However, we explicitly size only 4 rows using the grid-template-rows property. Since the 5th row is not assigned a size explicitly, the grid-auto-rows property specifies the size for this row. Inspect this demo using Firefox grid inspector which does a great job displaying this behaivour.

<div class="grid-container">	<div>Item</div>	<div>Item</div>	<div>Item</div>	<div>Item</div>	<div>Item</div></div>

.grid-container {	display: grid;	grid-template-areas:		'. .'		'. .'		'. .'		'. .'		'. .';	grid-template-rows: repeat(2, 20px 50px);	grid-auto-rows: 100px;	gap: 1px;	border: 1px solid;	> div {		outline: 1px solid red;	}}