Question

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

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网格做同样的事情？即，针对子项指定它应该使用剩余空间而不使用使用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>

真实场景涉及一个包含运行时定义的列数的网格，以及一个运行时定义的子集，其中一些可能是display：none。

Answer 1

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

＆＃13;

html,
body {
  height: 100%
}

＆＃13;

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

＆＃13;

Answer 2

使用grid-template-rows：

＆＃13;

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

＆＃13;

注意：html和body需要将其高度设置为100%，因为网格不会像flex一样自动向下生长。

使用flex-grow：1使网格项目像弹性项目一样使用剩余空间

2 个答案: