grid-auto-rows仅控制隐式网格行高度，对grid-template-rows定义的显式行无效；align-items只影响内容对齐，不改变行高；统一行高需用repeat(3, 1fr)或统一写死grid-template-rows。
直接说结论： grid-auto-rows 控制的是**隐式网格行的高度**，它对已定义的显式行（比如用 grid-template-rows 写死的行）完全无效；而 align-items 只影响**单元格内容在行内的对齐方式**，不改变行高本身。两者配合无法“统一行高”，更不会自动拉齐高度不一致的网格项。
为什么 grid-auto-rows 看起来没起作用？
常见误解是把所有行都当成“自动创建的”，其实：
- 显式行（由
grid-template-rows定义）优先级最高，grid-auto-rows对它们完全不生效 -
grid-auto-rows只在子元素超出显式行数量时，为新增的隐式行（比如第 4 行、第 5 行……）设高度 - 如果你写了
grid-template-rows: 100px 200px;，那第 1 行永远是100px，第 2 行永远是200px，无论grid-auto-rows设成什么
align-items: stretch 并不等于“撑满行高”
align-items: stretch（默认值）会让子元素在交叉轴（这里是垂直方向）上拉伸，但前提是：子元素自身没有设置块级高度限制。一旦出现以下情况，拉伸就会失效：
- 子元素设置了
height、max-height或min-height - 子元素是
display: flex或display: grid容器，且内部有不可压缩内容 - 子元素内有图片、
textarea、iframe等固有尺寸元素，且未做尺寸约束 - 父网格行本身高度是
auto或由内容撑开，而非固定值
真正能统一行高的实用方案
要让多行网格中每行高度一致，得从源头控制：
立即学习“前端免费学习笔记（深入）”；
- 删掉
grid-template-rows的具体数值，改用等分语法：grid-template-rows: repeat(3, 1fr);
—— 这样三行均分容器高度，天然一致 - 若需固定高度+等高，明确写死所有行：
grid-template-rows: 120px 120px 120px;
，而不是依赖grid-auto-rows - 如果行数不确定，又必须等高，用
grid-auto-rows: 120px+grid-template-rows: none（即不写grid-template-rows），此时所有行（包括原本该是显式的）都会按grid-auto-rows计算——但注意：这会失去对首几行的精细控制 - 对单个网格项强制等高，可加：
align-self: stretch;
，并确保其父行高度固定（如120px或1fr）且自身无height冲突
最容易被忽略的一点：浏览器渲染时，grid-auto-rows 和 grid-template-rows 的优先级关系不是“补充”，而是“分工”。混淆这两者，比调错 align-items 更容易导致布局失控。
