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

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 start to fill up the remaining gaps with the fr-proportions. (So after the rest is done, browser will calculate the sum of all the fr numbers, say you have 1fr + 1fr + 3fr + 2fr so it's 7, then the remaining space will be cut to 7 equal slices, and then everyone gets their share.)

Also, when you split horizontal space:

• 1fr 1fr 1fr will give you 3 equal columns,
• auto auto auto gives adaptive-width columns

Answer 2

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

Answer 3

The fr unit represents a fraction of the leftover space in the grid container.

The leftover space is calculated after auto etc.

Answer 4

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