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

With CSS grid layout, the grid-template-rows value auto means:

The size of the rows is determined by the size of the container, and on the size of the content of the items in the row

and 1fr is a new flexible unit in GRID css. [Fr] is a fractional unit and 1fr is for 1 part of the available space.

so thats why your 3rd grid item is taking the remaining space and all remaining grid items are taking space according to its content

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

As a thumb rule,

• fr is greedy,
• auto is shy.

When the browser renders your grid, first it calculates the necessary sizes of auto elements - they all get the minimum they can live with -, and then, after all other sizes are known, will it distribute the remaining space among fr cells. Distribution works the obvious way: sum the numbers, slice the pie, give everyone the amount requested. Like, you have 1fr, 1fr, 3fr and 2fr in the definitions - the numbers add up to 7, therefore the remaining space will be cut to 7 equal slices, and then everyone gets their share.

Splitting horizontal space

Remember this one and grids will be your best friends:

• 1fr 1fr 1fr --------> 3 equal columns,
• auto auto auto ----> 3 adaptive-width columns