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