grid-auto-rows仅作用于隐式行，对grid-template-rows定义的显式行无效；显式行按声明值渲染，隐式行才受其控制。
grid-auto-rows 只管隐式行，显式行完全不生效
写了 grid-auto-rows: 120px 却发现前几行高度不一致？大概率你已经写了 grid-template-rows——比如 grid-template-rows: 80px 160px。这两行是“显式行”，浏览器直接按你写的值渲染，grid-auto-rows 对它们完全没反应。
它只对后面动态新增、浏览器自动创建的那些“隐式行”起作用。用开发者工具 Layout 面板勾选 “Highlight grid tracks”，能一眼看出哪些是显式轨道、哪些是隐式轨道。
- 显式行 = 你在
grid-template-rows里手写的每一项 - 隐式行 = 子项数量超过显式行数后，Grid 自动追加的行
- 如果没写
grid-template-rows，那所有行都算隐式行，grid-auto-rows全局生效
统一隐式行高的三种典型写法
根据内容是否可控、容器是否有固定高度，选不同策略：
-
grid-auto-rows: 120px：强制所有隐式行高 120px。内容超长会被裁剪，需配合overflow: hidden和text-overflow: ellipsis -
grid-auto-rows: minmax(100px, auto)：最常用。每行至少 100px（防文字挤成一条线），内容多就自然撑开，不截断 -
grid-auto-rows: 1fr：要求容器有明确高度（如height: 500px）。所有隐式行均分剩余空间，视觉等高但实际高度随容器变化
注意：1fr 在没有容器高度时会退化为 auto，结果还是各行自适应，不是真等高。
立即学习“前端免费学习笔记（深入）”；
为什么设了 minmax 还是不统一？检查这三处
即使 grid-auto-rows: minmax(100px, auto) 写对了，行高仍参差，问题往往不在 Grid 层，而在子项自身：
- 子项设置了
min-height或height，强行突破行高下限 - 子项用了
align-self: stretch（默认值），又内部有display: flex+flex-direction: column，导致交叉轴拉伸失控 - 图片没设
object-fit或aspect-ratio，原始尺寸撑开整行
调试建议：临时加 * { outline: 1px solid red !important; }，快速暴露真实尺寸；再逐个点开子项，在 Computed 面板查 height、min-height、align-self 是否被意外覆盖。
和 grid-template-rows 混用时的常见陷阱
想让首行特殊、后续统一？可以混用，但必须清楚边界：
-
grid-template-rows: 150px;+grid-auto-rows: 100px→ 第一行 150px，其余全 100px - 但若写成
grid-template-rows: 150px 100px;+grid-auto-rows: 100px→ 前两行固定，第三行起才听grid-auto-rows - 避免
grid-template-rows: repeat(3, 100px)+grid-auto-rows: 100px这种冗余写法——既然全要 100px，直接删掉grid-template-rows，全交给grid-auto-rows更干净
真正容易翻车的地方，是以为 grid-auto-rows 是“全局行高开关”，却忘了自己早就在别处悄悄定义了显式行。删掉或重审 grid-template-rows，往往是解决问题的第一步。
