CSS Grid 有 flex-grow 功能吗？

Question

grid 属性是否有类似 flex-grow 的形式？

我希望我的网格区域能够容纳他们收到的内容，但有些区域比其他区域占用更多的空间，例如 flex-grow 用于 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 在弹性项目中分配容器中的免费 space，但 fr 单元在容器中的行/列中免费分配 space。

来自规范：

7.2.3. Flexible Lengths: the fr unit

A flexible length or <flex> is a dimension with the fr unit, which represents a fraction of the free space in the grid container.

（请注意，flex-grow 应用于 flex 项目，而 fr 长度应用于 网格容器.)

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

第一行是header。您希望内容设置其高度。所以它的高度设置为auto.
最后一行是页脚。您希望内容设置其高度。所以它的高度设置为auto.
中间一行包含 nav 和 main 元素。您希望此行占据所有剩余的垂直 space。所以它的高度设置为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>

CSS Grid 有 flex-grow 功能吗？

Does CSS Grid have a flex-grow function?

html

css

css-grid

jsFiddle demo