使网格项目使用带有flex-grow的flex项目之类的剩余空间：1 [英] Make grid item use remaining space like flex item with flex-grow: 1

问题描述

在flexbox中，我可以为孩子指定flex-grow：1，说它应该占用剩余空间。

In a flexbox I can specify flex-grow:1 on a child to say it should take up the remaining space.

html, body {
  height: 100%
}

<div style="display:flex;flex-direction:column;height:100%">     
  <div style="background-color:yellow;height:50px"></div>
  <div style="background-color:red;flex-grow:1"></div>
</div>

是否可以使用CSS网格做同样的事情？例如，要针对子项指定应使用剩余空间而无需使用网格模板行明确定义它？

Is it possible to do the same thing with css grid? i.e. to specify against a child item that it should use remaining space without defining it explicitly using grid-template-rows?

html, body {
  height: 100%
}

<div style="display:grid;grid-template-columns:auto;height:100%">
  <div style="background-color:yellow;height:50px"></div>
  <!-- what to use instead of flex-grow:1? -->
  <div style="background-color:red;flex-grow:1;"></div>
</div>

实际情况与一个网格有关，该网格包含运行时定义的列数，以及运行时定义的子集，其中一些子项可能显示为：none。 / p>

The real scenario relates to a grid containing a runtime defined number of columns, and a runtime defined set of children some of which may be display:none.

推荐答案

您可以使用 grid-template-rows指定行高：min-content auto; ，这将最小化第一行并延伸第二行。

You could specify the row height with grid-template-rows: min-content auto;, which minimizes the first row and stretches the second.

html,
body {
  height: 100%
}

<div style="display:grid;grid-template-columns:auto;height:100%;grid-template-rows: min-content auto;">
  <div style="background-color:yellow;height:50px"></div>
  <div style="background-color:red;"></div>
</div>

这篇关于使网格项目使用带有flex-grow的flex项目之类的剩余空间：1的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！