当 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;
}<section class="hero"> <div class="item item1">Item1. Should be short when wrapped</div> <div class="item item2">Item2. Should take all available height when wrapped.</div> </section>
✅ 优势说明：
立即学习“前端免费学习笔记（深入）”；
- 无需媒体查询，纯 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，而是用对工具，在恰当的抽象层级解决问题。
