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>

回答1:

In GRID css, 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

回答2:

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

回答3:

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

来源：https://stackoverflow.com/questions/49145552/how-is-grid-template-rows-auto-auto-1fr-auto-interpreted

标签

css

css3

grid-layout

css-grid