如何让CSS Grid子项如Flex子项般占用剩余空间（无需显式定义grid-template-rows）

当然可以！在CSS Grid布局里，完全能实现和Flexbox中flex-grow:1一样的「让子元素自动占据剩余空间」的效果，而且完美适配你提到的**运行时动态定义子元素、部分元素可能设置display:none**的实际场景。

核心实现方案 #

不需要显式硬编码grid-template-rows的固定行数，我们可以利用Grid的minmax()函数结合1fr单位来实现自动适配：

示例代码 #

html, body { 
  height: 100%; 
  margin: 0; /* 移除默认边距，避免出现不必要的滚动条 */
}

<!-- Grid容器：设置高度为100%，自动行高适配内容与剩余空间 -->
<div style="display: grid; grid-auto-rows: minmax(auto, 1fr); height: 100%;">
  <!-- 固定高度的子元素：自身高度会被Grid行高适配 -->
  <div style="background-color: yellow; height: 50px;"></div>
  <!-- 占据剩余空间的子元素：无需额外设置，1fr会自动分配剩余空间 -->
  <div style="background-color: red;"></div>
</div>

适配动态场景的原理 #

• minmax(auto, 1fr)的作用：这个值会让Grid的每一行高度自动调整——如果子元素有固定高度（比如第一个黄色div的50px），行高就取这个固定值；如果子元素没有设置固定高度，行高就会占据容器的剩余空间。
• 处理隐藏元素：当子元素设置display:none时，Grid会自动忽略这个元素，不会为它分配行空间，剩余的元素会自动填充整个容器高度。
• 多子元素场景：如果有多个固定高度的子元素，只需要给它们设置各自的固定高度即可，Grid会自动计算所有固定高度的总和，剩下的空间会分配给没有固定高度的子元素。

另一种简化方案（适合明确行数的场景） #

如果你提前知道子元素的大致结构（比如一个固定高度元素+一个占剩余空间的元素），也可以直接显式定义grid-template-rows，写法更直观：

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

这里的auto会适配第一个子元素的固定高度，1fr则占据容器剩余的所有空间，同样支持隐藏元素的自动适配。

内容的提问来源于stack exchange，提问作者lycandroid