17370845950

当 flex 容器换行时，默认无法让某一子项独占剩余高度；改用 css grid 的 `grid-auto-rows: 1fr` 配合响应式列定义，可优雅实现：窄屏下首项“收缩贴内容”，次项“撑满剩余高度”。

在响应式布局中，我们常希望一个双栏英雄区（hero section）在宽屏时并排显示、窄屏时垂直堆叠，并对堆叠后的高度分配有精细控制——例如左侧装饰性区块仅需包裹自身内容高度，而右侧主内容区块应自动填充父容器剩余空间。单纯依赖 display: flex + flex-wrap 无法满足该需求，因为换行后所有 flex items 默认按 align-content: stretch 分布，均分容器高度，且 align-content: flex-start 又会导致高度塌陷或溢出。

此时，CSS Grid 是更语义清晰、行为可控的解决方案。核心思路是：

• 使用 grid-template-columns: repeat(auto-fit, minmax(...)) 实现与 Flex 类似的响应式列数控制（最

  

  小宽度 300px，理想宽度 40%）；
• 设置 grid-template-rows: auto —— 显式定义第一行高度由内容决定；
• 关键一步：grid-auto-rows: 1fr —— 当触发换行（即生成第二行）时，新行将自动占据剩余可用高度，且该行为天然支持单列流式布局。

以下是完整、可直接运行的实现代码：

.hero {
  display: grid;
  /* 响应式列：最小300px，最大不超过40%或100%（适配极窄屏） */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 40%)));
  grid-template-rows: auto;     /* 第一行高度由内容决定 */
  grid-auto-rows: 1fr;         /* 换行后的新行（即第二行）占满剩余高度 */
  height: 500px;
}

/* 装饰性样式（便于视觉验证） */
.hero {
  background-color: hsla(0, 100%, 50%, 0.5);
  padding: 10px;
  border: 2px dotted red;
}
.item1 {
  background-color: hsla(120, 100%, 50%, 0.5);
  padding: 10px;
  border: 2px dotted green;
}
.item2 {
  background-color: hsla(240, 100%, 50%, 0.5);
  padding: 10px;
  border: 2px dotted blue;
}

  Item1. Should be short when wrapped
  Item2. Should take all available height when wrapped.

✅ 优势说明：

• 无需媒体查询，纯 CSS 响应式逻辑；
• grid-auto-rows: 1fr 确保次项在换行后真正“伸展”至剩余空间，无溢出风险；
• minmax(min(300px, 100%), 40%) 兼顾移动端适配（避免列宽超屏）与桌面端比例控制。

⚠️ 注意事项：

• 若 .item2 内容极少，1fr 仍会强制撑高，此时可为其添加 min-height: min-content 或结合 max-content 微调；
• Grid 布局在 IE11 中不被支持，如需兼容，请搭配 -ms-grid 回退方案或保留 Flex + JS 动态计算高度的降级逻辑。

综上，面对“换行后差异化高度分配”这一典型场景，CSS Grid 凭借其行列分离、自动轨道生成的能力，比 Flexbox 更加精准高效——它不是替代 Flex，而是用对工具，在恰当的抽象层级解决问题。