“grid-template-rows: auto auto 1fr auto”如何解释？

Question

最近，我使用 CSS 网格 创建了一个布局。虽然这很有效，但我对它的工作原理感到困惑。具体来说，我对

grid-template-rows: auto auto 1fr auto;

这行感到困惑。

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

如果我使用

grid-template-rows: auto auto auto auto;

代替，标题和导航将共享相等的间距，这不是我想要的。

如何解释

auto auto 1fr auto

以便它为我提供尺寸，使标题占据所需的最小空间，而导航占据其余空间？在这种情况下“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

  很害羞。

当浏览器渲染你的网格时，first它会计算

auto

元素的必要大小 - 它们都获得可以忍受的最小值 - then，在所有其他大小已知后，它会分配剩余的大小吗？

fr

细胞之间的空间。分配的工作方式很明显：将数字相加，切分，给每个人所要求的金额。例如，定义中有

1fr

、

1fr

、

3fr

和

2fr

- 这些数字加起来为

7

，因此剩余空间将被切成 7 个相等的切片，然后每个人都获得自己的份额.

分割水平空间

记住这一点，网格将成为你最好的朋友：

• 1fr 1fr 1fr

  --------> 3 个相等的列，

• auto auto auto

  ----> 3 个自适应宽度列

1fr 1fr 1fr:

  +-----------+ +-----------+ +-----------+
  |           | |           | |           |
  |   fixed   | |   width   | |   items   |
  |           | |           | |           |
  +-----------+ +-----------+ +-----------+

auto auto auto:

  +-----------+ +-------+ +------------+
  |           | |       | |            |
  |  columns  | |  are  | |  adaptive  |
  |           | |       | |            |
  +-----------+ +-------+ +------------+

Answer 2

使用CSS网格布局，

grid-template-rows

值

auto

表示：

行的大小由容器的大小以及行中项目内容的大小决定

和

1fr

是GRID css中的一个新的灵活单元。 [Fr] 是分数单位，

1fr

表示可用空间的 1 部分。

这就是为什么你的第三个网格项目占用剩余空间，而所有剩余的网格项目都根据其内容占用空间

Answer 3

1fr

表示“占用可用空间的 1 部分”，并且由于没有其他元素定义为

fr

，因此它也表示“占用所有可用空间”

auto

表示“采用

grid-auto-rows

属性具有的任何值”，默认情况下也是

auto

，在这种情况下意味着根据内容调整大小......但如果需要，轨道也可以拉伸与其他列上的内容大小相匹配

Answer 4

fr

单位表示网格容器中剩余空间的一小部分。

剩余空间是在

auto

等之后计算的