当 flex 容器换行时，无法自然实现“一个子项收缩至内容高度、另一个占满剩余空间”的布局；css grid 通过 `grid-auto-rows: 1fr` 与响应式列定义可优雅解决该问题。
在响应式英雄区（hero section）设计中，常需实现「宽屏双栏并列、窄屏单列堆叠」的布局。若使用 display: flex 配合 flex-wrap: wrap，换行后所有子项默认按 align-content: stretch 拉伸至容器等高——这会导致内容较少的区块（如装饰性图片容器）被不必要地拉高，破坏视觉节奏与语义结构。
此时，CSS Grid 是更精准的解决方案。它天然支持“显式定义首行尺寸 + 隐式定义后续行尺寸”的能力，恰好匹配需求：
- grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 40%))
创建响应式列：最小宽度 300px（或 100% 视口宽，取较小值），最大基础宽度 40%，自动填充可用列数； - grid-template-rows: auto
显式声明第一行高度由内容决定（即 .item1 自然收缩）； - grid-auto-rows: 1fr
当换行发生（即第二行生成）时，隐式创建的行将占据剩余全部高度（即 .item2 填满余量）； - 整体容器保持固定高度（如 height: 500px），确保布局稳定。
.hero {
display: grid;
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>
⚠️ 注意事项：
- grid-auto-rows: 1fr 仅对隐式网格行生效（即超出 grid-template-rows 显式定义的行），因此必须保留 grid-template-rows: auto 以确保首行不受 1fr 干预；
- minmax(min(300px, 100%), 40%) 中的 min() 函数确保在超小屏（如手机竖屏）下，列宽不会超过视口，避免水平滚动；
- 若需兼容旧版浏览器（IE），需回退至媒体查询 + Flex 方案，但现代项目推荐优先采用 Grid；
- 此方案无需 JavaScript 或额外 DOM 结构，纯 CSS 驱动，性能优异且语义清晰。
总结：面对 Flex 换行后高度难以差异化控制的场景，CSS Grid 的显式/隐式轨道分离机制提供了更直观、更可控的替代路径——用对特性，比绕过限制更高效。
立即学习“前端免费学习笔记（深入）”；
