CSS网格是否具有flex-grow功能？ [英] Does CSS Grid have a flex-grow function?

问题描述

对于 flex-grow Web / CSS / gridrel =nofollow noreferrer> grid property？

我希望我的网格区域能够容纳内容他们会收到，但有一些地方比 flex-grow 等其他地方占用更多空间， flex 。

实际上，在下面的示例中，我希望

• turquoise 不可见，因为它容纳了它的内容。


• 页脚也不可见，因为它没有内容。


• 中间部分以 flex-grow 之类的其余页面为
。

实际上，我想要这样的代码：

  .ctnr {display：grid;最小高度：100vh; grid-template-areas：header headernav mainfooter footer;}。test {background：black; height：1rem;} header {grid-area：header;背景：绿松石;} nav {grid-area：nav; background：gray;} main {grid-area：main;} footer {grid-area：footer;背景：yellow}  

< div class =ctnr > <报头GT; < div class =test>< / div> < /报头> < NAV>< / NAV> <主>< /主> < footer>< / footer>< / div>

行为像这样的代码：

.ctnr {显示：flex; flex-direction：列; height：100vh;}。panel {flex-grow：1; display：flex;} header {flex-grow：0; background：turquoise;} nav {min-width：10rem;背景：gray} footer {background：yellow}

< div class =ctnr> <报头GT;哎LT; /报头> < div class =panel> < NAV>< / NAV> <主>< /主> < / DIV> < footer>< / footer>< / div>

没有 div.panel 并且不添加任何附加标记。

我想这样做的原因是合法的，额外的 div 元素令我烦恼。

解决方案

CSS Grid提供了 fr code> flex-grow 。

虽然 flex-grow 分配可用空间容器在Flex项目中， fr 单元在容器中的行/列之间分配可用空间。 从规范：

7.2.3。灵活的长度： fr
单位

灵活的长度或< flex> 是一个以 fr 为单位的维度，其中
表示可用空间的一小部分（请注意， flex-grow ）适用于网格容器。

flex items ，而 fr 长度应用于网格容器。）

因此，在您的网格中，您有三行：

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




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




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

  .ctnr {display：grid; grid-template-rows：auto 1fr auto; / *关键规则* / grid-template-columns：1fr 1fr;身高：100vh; grid-template-areas：header headernav mainfooter footer;} header {grid-area：header;背景：绿松石;} nav {grid-area：nav;背景：灰色;} main {grid-area：main;背景：橙色;}页脚{网格区域：页脚;背景：yellow;} body {margin：0;}  

< div class =ctnr> <报头GT;报头LT; /报头> < NAV> NAV< / NAV> <主>主< /主> < footer> footer< / footer>< / div>

jsFiddle演示

Is there an analog to flex-grow for the grid property ?

I'd like my grid areas to accomodate the content they receive but have some areas take more place than others like flex-grow for flex.

Practically, in the example below I'd like

• the turquoise to be invisible because it accomodates its content.
• The footer to be invisible as well because it has no content.
• The middle section take the remaining of the page like flex-grow.

More practically, I'd like this code:

.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>

To act like this code:

.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>

Without the div.panel and without adding any additional tag.

The reason I would like to do this, is a legitimate one, that extra div element is annoying me.

解决方案

CSS Grid offers the fr unit, which functions similarly to flex-grow.

While flex-grow distributes free space in the container among flex items, the fr unit distributes free space in the container among rows / columns.

From the spec:

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.

(Note that flex-grow is applied to flex items, while fr lengths are applied to grid containers.)

So in your grid, you have three rows:

1. The first row is the header. You want the content to set its height. So its height is set to auto.

2. The last row is the footer. You want the content to set its height. So its height is set to auto.

3. The middle row contains the nav and main elements. You want this row to occupy all remaining vertical space. So its height is set to 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

这篇关于CSS网格是否具有flex-grow功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！