CSS Grid 有 flex-grow 功能吗？

Question

grid 属性是否与 flex-grow 类似？

我希望我的网格区域能够容纳他们收到的内容，但有些区域比其他区域占据更多的位置，例如 flex-grow for flex。

实际上，在下面的示例中，我想要

• turquoise 不可见，因为它容纳了它的内容。
• footer 也是不可见的，因为它没有内容。
• 中间部分取页面的其余部分，如flex-grow。

更实际地，我想要这段代码：

.ctnr {
  display: grid;
  min-height: 100vh;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
}

.test {
  background: black;
  height: 1rem;
}

header {
  grid-area: header;
  background: turquoise;
}

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

main {
  grid-area: main;
}

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

<div class="ctnr">
  <header>
    <div class="test"></div>
  </header>
  <nav></nav>
  <main></main>
  <footer></footer>
</div>

像这样的代码：

.ctnr {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.panel {
  flex-grow: 1;
  display: flex;
}

header {
  flex-grow: 0;
  background: turquoise;
}

nav {
  min-width: 10rem;
  background: grey
}

footer {
  background: yellow
}

<div class="ctnr">
  <header>hey</header>
  <div class="panel">
    <nav></nav>
    <main></main>
  </div>
  <footer></footer>
</div>

没有 div.panel 并且没有添加任何额外的标签。

我想这样做的原因是正当的，额外的div 元素让我很烦。

Answer 1

CSS Grid 提供fr 单元，其功能类似于flex-grow。

flex-grow 在 flex 项之间分配容器中的可用空间，fr 单元在行/列之间分配容器中的可用空间。

来自规范：

7.2.3. Flexible Lengths: the fr unit

灵活长度或<flex> 是具有fr 单位的尺寸，它 表示网格容器中可用空间的一小部分。

（注意flex-grow 应用于弹性项目，而fr 长度应用于网格容器。）

所以在你的网格中，你有三行：

1. 第一行是标题。您希望内容设置其高度。所以它的高度设置为auto。

2. 最后一行是页脚。您希望内容设置其高度。所以它的高度设置为auto。

3. 中间行包含nav 和main 元素。您希望这一行占据所有剩余的垂直空间。所以它的高度设置为1fr。

.ctnr {
  display: grid;
  grid-template-rows: auto 1fr auto;  /* key rule */
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  grid-template-areas: "header header" 
                         "nav main" 
                       "footer footer";
}

header {
  grid-area: header;
  background: turquoise;
}

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

main {
  grid-area: main;
  background: orange;
}

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

body {
  margin: 0;
}

<div class="ctnr">
  <header>header</header>
  <nav>nav</nav>
  <main>main</main>
  <footer>footer</footer>
</div>

jsFiddle demo