grid-auto-rows设为auto时align-items:stretch无效，因隐式行高由内容决定，无拉伸空间；需设为1fr或固定值并确保容器有明确高度，才能实现等高拉伸。
grid-auto-rows 设为 auto 时 align-items: stretch 不起作用
这是最常见的误解：很多人以为只要写了 align-items: stretch（默认值），网格项就会纵向拉满容器高度，结果发现某些行里的项目高度参差不齐。根本原因在于——grid-auto-rows 的值决定了**隐式行轨道的高度**，而 align-items 只对**已有轨道内的项目**生效。如果某行是自动创建的（比如内容溢出导致新增行），且 grid-auto-rows 是 auto 或 max-content，那该行高度就由内容撑开，stretch 就没空间可“拉”了。
-
grid-auto-rows: auto→ 行高 = 该行中最高项目的min-height或内容高度，align-items: stretch无法突破这个上限 -
grid-auto-rows: 1fr或具体数值（如100px）→ 行轨道有明确高度，此时align-items: stretch才能真正把项目拉满整行 - 显式定义的行（用
grid-template-rows）不受grid-auto-rows影响，但同样需注意：若写成grid-template-rows: auto auto，每行仍由内容决定高度，stretch依然无效
想让所有网格项纵向等高，必须统一行高基准
等高不是靠对齐属性单方面实现的，而是靠**轨道高度可控 + 对齐生效**的组合。关键在让每一行（无论显式还是隐式）都有确定的高度约束。
- 显式行：用
grid-template-rows: 1fr 1fr或grid-template-rows: 200px 200px，避免auto - 隐式行：必须设置
grid-auto-rows: 1fr（推荐）或固定值，不能留空或设为auto - 如果行数不确定，又想等高，
1fr是最稳妥的选择——它会让所有行均分剩余空间，配合align-items: stretch，每个项目自然填满各自行轨道 - 注意：
fr单位只在容器有明确高度（如height: 500px或min-height）时才有效；否则1fr会退化为auto
常见错误：用 height: 100% 强行拉伸子元素
有人试图在网格项内部加 height: 100%，甚至嵌套 flex 去“辅助拉伸”，这通常失败。因为 % 高度依赖父元素有明确高度，而网格项的父级是行轨道——如果轨道本身高度未定（auto），100% 就算不出来。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr; /* ✅ 关键：给隐式行定高 */
height: 600px; /* ✅ 容器必须有高度，fr 才有意义 */
align-items: stretch; /* ✅ 默认就是 stretch，可省略 */
}
<p>.item {
/<em> 不需要 height: 100%！它会失效或引发滚动 </em>/
/<em> 也不需要 display: flex + align-items: stretch </em>/
}上面代码中，三个项目即使内容高度不同，也会被拉伸到同一行高（即 600px / 行数），因为每行轨道高度已由 1fr 和容器高度共同确定。
立即学习“前端免费学习笔记（深入）”；
兼容性与性能提示
grid-auto-rows: 1fr 和 align-items: stretch 在现代浏览器中完全支持（Chrome 57+、Firefox 52+、Safari 10.1+）。但要注意：
- Safari 旧版本（fr 用于
grid-auto-rows，只能降级为固定像素值 - 大量网格项 +
1fr行高可能导致重排计算变慢，尤其容器高度动态变化时；若性能敏感，优先用固定行高或minmax(min-content, max-content)替代 -
align-items: stretch对设置了height、min-height或max-height的项目会失效——这些属性会覆盖拉伸行为
真正卡住的点往往不是语法写错，而是忘了给容器设高度，或者误以为 auto 行也能被拉伸。一旦轨道高度不可控，再怎么调对齐都没用。
