grid-auto-rows仅控制隐式行高，不影响显式定义的行；统一所有行高应使用grid-template-rows配合repeat()，并排查子项的min-height、align-self等干扰样式。
直接用 grid-auto-rows 无法统一所有行高——它只管“多出来的行”，也就是隐式行；显式定义的行（比如写了 grid-template-rows: 100px 200px）完全不受它影响。
grid-auto-rows 只对隐式行生效
很多人设了 grid-auto-rows: 120px 却发现前两行还是高低不一，原因就是：你已经用 grid-template-rows 显式定义了前几行高度，grid-auto-rows 根本不参与控制。
- 显式行：由
grid-template-rows或grid-template-columns定义，优先级最高 - 隐式行：子项数量超出显式定义的轨道数时，Grid 自动创建的行，才走
grid-auto-rows - 浏览器开发者工具里看 “Layout” 面板 → 勾选 “Highlight grid tracks”，能一眼分清哪些是显式、哪些是隐式
想真正统一所有行高，改用 grid-template-rows + repeat()
除非你明确需要前几行特殊、后续自动延展，否则别依赖 grid-auto-rows 做全局统一。直接用 grid-template-rows 配合 repeat() 更可靠：
- 固定行数（如 4 行卡片）：
grid-template-rows: repeat(4, 120px) - 动态行数但需等高（如响应式卡片列表）：
grid-template-rows: repeat(auto-fill, 120px)或repeat(auto-fit, 120px) - 要弹性分配剩余空间（容器有明确高度）：
grid-template-rows: repeat(5, 1fr)，5 行均分容器高度 - 注意：
1fr要求容器本身有height或min-height，否则退化为auto
内容撑开行高的常见干扰项
即使设了 grid-template-rows: repeat(3, 120px)，某一行仍被顶高，大概率是子项自己“不守规矩”：
- 子项设置了
min-height、height或max-height，尤其是min-height: auto会禁用 stretch 行为 - 子项内用了
display: flex但没设align-items: stretch，导致内部子项不拉伸 - 图片没约束尺寸，或文字换行太多又没加
overflow: hidden+text-overflow: ellipsis - 子项的
align-self被设为start、center等，覆盖了默认的stretch
调试时最该盯住的三个地方
别猜，直接看计算值：
- 在 Elements 面板中选中 Grid 容器 → Layout 标签 → 开启 “Show grid line numbers” 和 “Highlight grid tracks”，确认每条轨道是否真按你写的高度渲染
- 逐个点击子项 → 查 Computed 面板里的
height、min-height、align-self，尤其注意是否被框架或重置样式覆盖 - 临时加一句
* { outline: 1px solid red !important; }，快速暴露真实边界和 padding/margin 是否错位
真正卡住人的从来不是语法写错，而是以为 grid-auto-rows 在管全部，其实它只管“后加入的那些行”；而子项里一个没注意到的 min-height: auto 或 align-self: start，就能让整行失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
