CSS Grid是否具有flex-grow功能？

Question

是否有一个模拟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分布在挠性项之间的容器的自由空间,所述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演示