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