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: 120px，但前两行还是一个高一个矮。原因很直接：你已经在 CSS 里写了 grid-template-rows: 80px 160px 这类显式声明——那这两行就完全不听 grid-auto-rows 的。
-
grid-template-rows定义的是显式行，优先级最高，grid-auto-rows对它无效 -
grid-auto-rows只管“多出来的行”，也就是子项数量超出显式行数后，Grid 自动创建的那些隐式行 - 浏览器开发者工具 Layout 面板中勾选 “Highlight grid tracks”，一眼就能区分显式 vs 隐式轨道
真正统一所有行高的写法
如果你要的是整组卡片/列表全部等高（比如 4 行固定、或响应式自动填满），别依赖 grid-auto-rows 去“补漏”，直接用 grid-template-rows + repeat()：
- 已知行数（如 4 张卡片）：
grid-template-rows: repeat(4, 120px) - 动态列数、固定最小行高：
grid-template-rows: repeat(auto-fill, minmax(120px, 1fr))) - 容器有明确高度（如
height: 600px）：grid-template-rows: repeat(5, 1fr)—— 注意：没height或min-height时，1fr会退化为auto
用 grid-auto-rows: minmax() 做弹性统一
当你要保留内容自适应能力（比如文字多就撑高、少就保持基础高度），又希望视觉上底边对齐整齐，grid-auto-rows: minmax(10rem, auto) 是更务实的选择：
-
minmax(10rem, auto)表示每行至少 10rem，内容超长时可突破上限，不截断 - 它只对隐式行生效，所以必须确保你没写
grid-template-rows，或者只写了前几行（如grid-template-rows: 150px），其余靠grid-auto-rows接管 - 配合
align-items: start（而非默认stretch）能避免子项被强行拉伸变形 - 注意：图片没设
aspect-ratio、文字没加line-clamp、子项设了min-height，都会让实际行高突破minmax下限
调试时最容易忽略的三件事
行高不一致，90% 不是 Grid 写错了，而是子项自己“不守规矩”：
- 逐个点开子项，在 Computed 面板查
height、min-height、align-self—— 尤其注意是否被重置样式或框架注入覆盖 - 临时加一句
* { outline: 1px solid red !important; }，快速暴露真实尺寸和 padding/margin 是否错位 - 检查子项内部是否用了
display: flex却没设align-items: stretch，或用了position: absolute脱离文档流导致拉伸失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
