Grid布局实现等高多行的关键是用grid-auto-rows设定统一行高，而非依赖align-items: stretch的默认拉伸；如设为minmax(120px, auto)可确保每行至少120px且按最高内容自适应拉伸。

Grid 布局中实现“等高多行”效果，核心在于理解 align-items: stretch 的默认行为与 grid-auto-rows 的配合逻辑——它不是靠“强制设高”，而是靠“让行高由内容最高项决定”，再通过合理设置行轨道（track）来统一拉伸。

align-items: stretch 是默认行为，但只对直接子项生效

Grid 容器默认就是 align-items: stretch，这意味着：同一行内所有 grid item 会自动拉伸填满该行的高度。但注意——这个“行高”是由该行中**内容最高的那个 item** 决定的；如果某一行里所有 item 都很矮，那这行就矮，下一行又各自按自己的最高项算，结果就是各行高度不一致。

所以真正要“多行等高”，关键不是改 align-items，而是让所有行共享同一个“基准高度”。这时就要靠：

grid-auto-rows 设为固定值或 fr 单位

用 grid-auto-rows 显式定义自动创建的行轨道高度，才能打破“各行自决”的状态：

• 固定高度：如 grid-auto-rows: 120px → 每行强制 120px，item 在其中居中/拉伸（取决于自身 align-self）
• 弹性高度：如 grid-auto-rows: 1fr → 所有自动行平分剩余空间（需配合容器明确高度，比如 height: 400px）
• 最小约束 + 拉伸：如 grid-auto-rows: minmax(100px, 1fr) → 每行至少 100px，有余量时等比例拉伸

避免隐式行被内容撑开

如果没设 grid-auto-rows，浏览器会按需生成隐式行（implicit grid rows），其高度完全由内容撑开，无法统一。常见踩坑点：

• 忘了给容器设 display: grid 或漏写 grid-template-columns，导致布局退化为普通流
• item 内部用了 height: 100% 却没给父行设高度 → 百分比失效，回退到内容高
• 用 grid-row: span 2 跨行时，会影响其他行的对齐逻辑，建议搭配 align-self: stretch 确保跨行项也参与拉伸

一个可靠示例：3列×N行，每行等高

HTML 结构简单，CSS 如下：

 .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(120px, auto); /* 关键：设最小行高 */
  gap: 12px;
}
.item {
  background: #f5f5f5;
  padding: 16px;
  /* 不设 height，靠 stretch 自动填满行高 */
}

这样即使某些 item 文字多、图片大，只要不超过 minmax 上限，整行都会按最高内容拉伸；而 auto 保证不会过度截断。若想更严格等高，把 auto 换成 1fr 并给容器加固定高度即可。