css - "grid-template-rows: auto auto 1fr auto"是如何解释的？

Question

最近，我使用 CSS grid 创建了一个布局.虽然这很好用，但我对它的工作原理感到困惑。具体来说，我对 grid-template-rows: auto auto 1fr auto; 这一行感到困惑。

这里最终发生的是页眉和页脚的大小根据内容而定，这是有道理的，因为它们跨越了页面的宽度。文章本身根据其内容调整大小。但是，“title”和“nav”被分开了，这样 title 的大小根据内容和 nav 占据了剩余的空间。

如果我使用 grid-template-rows: auto auto auto auto;，标题和导航将共享相等的间距，这不是我想要的。

auto auto 1fr auto 是如何解释的，以便它给我调整大小，使 title 占据所需的最小空间，而 nav 占据其余空间？在这种情况下，“fr”和“auto”如何交互？

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

根据经验，

• fr 是贪心的，
• auto 很害羞。

当浏览器呈现您的网格时，首先它会计算 auto 元素的必要大小 - 它们都会得到它们可以接受的最小值 - 然后 ，在所有其他大小已知之后，它将剩余空间分配给 fr 单元格。分配的工作方式很明显:对数字求和，切饼，给每个人要求的数量。比如，您在定义中有 1fr、1fr、3fr 和 2fr - 这些数字加起来为 7，因此剩余的空间将被切割成 7 等份，然后每个人都有自己的份额。

分割水平空间

记住这一点，网格将是你最好的 friend :

• 1fr 1fr 1fr --------> 3 个相等的列，
• auto auto auto ----> 3 个自适应宽度列