How is “grid-template-rows: auto auto 1fr auto” interpreted?

Question

Recently, I created a layout using CSS grid. While this works well, I\'m confused by how it works. Specifically, I\'m confused about the line grid-template-rows: auto

Answer 1

1fr means "take 1 fraction of the available space", and since there are no other element defined as fr, it also means "take all available space"

auto means "take whatever value the grid-auto-rows property has", which is by default auto as well, in that case meaning to be sized accordingly to content... but tracks can also get stretched if need be to match the size of contents on other columns