CSS Grid 有 flex-grow 功能吗？

Question

是否有类似于

flex-grow

的 grid 属性？

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

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 网格提供了

fr

单位，其功能与

flex-grow

类似。

虽然

flex-grow

在弹性项目之间分配容器中的可用空间，但

fr

单元在行/列之间分配容器中的可用空间。

从规格来看：

7.2.3。灵活的长度：

fr

单位

灵活长度或

<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 演示

Answer 2

根据我的情况添加已接受的答案：有时会出现一个

<header>

元素，并且总是

<main>

和

<footer>

元素会出现在页面上，彼此位于同一位置；

<main>

应始终被拉伸（即

flex-grow: 1

但对于网格）

我将

grid-template-rows: auto 1fr auto;

添加到父级。当所有 3 个都存在时，此方法有效，但当

<header>

缺失时，此方法无效。我通过添加解决了这个问题：

修复：

grid-template-rows: auto 1fr auto;

在父元素上

grid-rows-end: span 2

上

<main>

说明：

<main>

始终占据 2 行。

grid-template-rows

是无限行数的模式，因此第 1-3 行是

auto 1fr auto

，4-6 是相同的，7-9，...
当页面上有 3 个元素时，

<header>

将采用值为

auto

的第一行，

<main>

将采用值为

1fr auto

的第 2 行和第 3 行。

<footer>

将从第 4 行开始，这是包含

auto

的模式的新开始。
当只有 2 个元素（因此没有

<header>

）时，

<main>

将占据第 1 行和第 2 行，即

auto 1fr

，而

<footer>

将占据包含

auto

的第 3 行

带标题：

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

main {
  grid-row-end: span 2;
}

header,
footer {
  background-color: hotpink;
}

<header>header</header>
<main>main</main>
<footer>footer</footer>

无标题：

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

main {
  grid-row-end: span 2;
}

header,
footer {
  background-color: hotpink;
}

<main>main</main>
<footer>footer</footer>