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 并给容器加固定高度即可。
