17370845950

当 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: hsl
a(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.

⚠️ 注意事项：

• 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 的显式/隐式轨道分离机制提供了更直观、更可控的替代路径——用对特性，比绕过限制更高效。