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

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>

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