grid-auto-rows 仅作用于隐式行，显式声明的 grid-template-rows 优先级更高；1fr 在无容器高度时退化为 auto；推荐用 minmax(120px, auto) 并检查子项尺寸与对齐。
grid-auto-rows 只管“多出来的行”，不是全局行高开关
设了 grid-auto-rows: 120px 却发现前几行还是高低不一，大概率是你已经写了 grid-template-rows: 80px 160px 或类似显式声明——那几行就完全不走 grid-auto-rows 的逻辑。显式行优先级最高，grid-auto-rows 只对子项超出显式轨道数后自动创建的隐式行生效。
浏览器开发者工具 Layout 面板中勾选 “Highlight grid tracks”，实线是显式轨道，虚线才是隐式行，一眼可辨。
1fr 在 grid-auto-rows 里基本没用，除非容器有高度锚点
grid-auto-rows: 1fr 看似能均分行高，但实际会退化为 auto：因为隐式行没有上下文高度可分。只有当容器本身有 height 或 min-height（比如 min-height: 400px），1fr 才有意义。
- 想让隐式行弹性等高，更稳妥的是
grid-auto-rows: minmax(120px, 1fr)，前提是容器有明确高度 - 纯内容驱动场景（如博客卡片列表），优先用
grid-auto-rows: minmax(120px, auto)，既保底又不截断 - 避免在
grid-auto-rows中混用1fr和固定值，容易引发计算冲突
子项自己“不守规矩”，比 Grid 设置影响更大
即使 grid-auto-rows 设置正确，子项一个 min-height: auto、align-self: start 或未约束的图片，就能让整行撑高或塌陷。
立即学习“前端免费学习笔记（深入）”；
- 逐个检查子项的
computed height、min-height、align-self，尤其注意是否被框架样式覆盖 - 图片必须加
height: 100%+object-fit: cover，且父容器需有明确高度上下文 - 临时加
* { outline: 1px solid red !important; }快速暴露真实尺寸和溢出
动态列表/虚拟滚动必须显式定义 grid-auto-rows
超长列表中，绝大多数项都落在隐式行里。grid-template-rows: repeat(auto-fill, 120px) 只生成固定数量的显式轨道，对后续项无效。省略 grid-auto-rows 或设为 auto，会导致滚动跳动、scrollHeight 失准。
最稳写法是：grid-auto-rows: minmax(120px, auto) —— 它不强制截断，也不放任自流，给浏览器一个可预测的高度基准。
真正难调的从来不是 Grid 声明本身，而是子项内部的 flex 嵌套、未重置的 margin、或 JS 动态插入时漏掉的 height: auto 清除。
