grid-auto-rows仅控制隐式行高，对grid-template-rows定义的显式行无效；统一所有行高应使用grid-template-rows配合repeat()，并排查子项min-height、align-self等干扰样式。
grid-auto-rows 只控制隐式行（即超出显式定义的行数后自动创建的那些行）的高度，不是“所有行”的统一高度开关——设了却没效果？大概率你已经写了 grid-template-rows。
为什么 grid-auto-rows 看似不生效？
常见现象：grid-auto-rows: 100px 写了，但前几行还是高低不一。
- 你已在 CSS 中声明了
grid-template-rows: 80px 160px—— 这两行是显式行，grid-auto-rows完全不参与控制 - 浏览器开发者工具 Layout 面板中勾选 “Highlight grid tracks”，能立刻区分显式轨道（实线）和隐式轨道（虚线）
- 子项自身设置了
min-height、height或align-self: start，会覆盖轨道对齐行为，让视觉高度“突破”设定值
怎么真正控制自动生成行的高度？
确保你只定义了部分显式行，或干脆不写 grid-template-rows，把行高交由 grid-auto-rows 全权接管：
- 固定高度：
grid-auto-rows: 120px—— 所有隐式行强制 120px，内容超长会溢出或被裁剪 - 弹性最小高度：
grid-auto-rows: minmax(10rem, auto)—— 每行至少 10rem，文字多就撑开，不截断 - 均分剩余空间（容器有明确
height）：grid-auto-rows: 1fr—— 注意：若容器无height或min-height，1fr会退化为auto - 配合
align-items: start使用，避免子项被默认的stretch拉伸变形
哪些样式会让行高“失控”？
即使 grid-auto-rows 设置正确，子项仍可能破坏行高一致性：
- 子项设了
min-height: 150px或height: 200px，直接顶高整行轨道 - 子项内图片未设
aspect-ratio或max-height，撑开父行 - 子项用了
position: absolute脱离文档流，Grid 不再将其纳入行高计算 - 子项内部是
display: flex但没设align-items: stretch，导致内部内容不拉伸，视觉上“矮了一截”
最常被忽略的一点：你调的不是“行高”，而是“轨道尺寸”；子项在其中是否填满、是否溢出，取决于它自己的 min-height、align-self 和内部排版逻辑——别只盯着 Grid 容器改，得一层层点开子项看 Computed 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
