在 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 做同样的事情？即针对子项目指定它应该使用剩余空间without使用 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。
您可以指定行高grid-template-rows: min-content auto;，这会最小化第一行并拉伸第二行。
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
