css - 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 auto 1fr auto;.

What ended up happening here is that the header and footer sized according to the content, which makes sense since they spanned the width of the page. The article itself sized according to its content. But, the "title" and "nav" were split such that the title sized according to content and nav took the rest of the space.

Had I used grid-template-rows: auto auto auto auto; instead, the title and nav would've shared equal spacing, which was not what I wanted.

How was the auto auto 1fr auto interpreted so that it gave me the sizing such that title took the minimum required space and nav took the rest? How does "fr" and "auto" interact in this scenario?

main {
    display: grid;
    grid-template-columns: 10rem auto;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "header header" "title article" "nav article" "footer footer";
}
    
header {
  grid-area: header;
  background: lightblue;
}

div {
  grid-area: title;
  background: orange;
}

nav {
  grid-area: nav;
  background: pink;
}

article {
  grid-area: article;
  background: yellow;
}
  
footer {
  grid-area: footer;
  background: lightblue;
}

<main>
<header>This is the header</header>
<div>This is the title</div>
<nav>This is the nav</nav>
<article>
  This is the article. This is the article. This is the article. This is the article.
  This is the article. This is the article. This is the article. This is the article.
  This is the article. This is the article. This is the article. This is the article.
  This is the article. This is the article. This is the article. This is the article.
  This is the article. This is the article. This is the article. This is the article.
  This is the article. This is the article. This is the article. This is the article.
</article>
<footer>This is the footer</footer>
</main>

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