grid-auto-rows不继承grid-template-rows是规范设计，显式行由grid-template-rows定义，隐式行由grid-auto-rows控制，默认auto；二者独立，需分别设置才能统一行高。
grid-auto-rows 不继承 grid-template-rows 是设计使然，不是 bug
显式行（grid-template-rows 定义的）和隐式行（浏览器自动创建的）属于两套独立控制体系。CSS Grid 规范明确将它们分离：显式轨道是你“签了合同”的部分，隐式轨道是“临时工”，默认不继承任何显式尺寸。你写 grid-template-rows: 100px 200px，只承诺前两行高度；第 3 行起哪怕内容一样，浏览器也按 auto 处理——除非你显式声明 grid-auto-rows。
为什么 grid-auto-rows: 100px 看起来没生效？
常见现象：设了 grid-auto-rows: 100px，但新加入的卡片行高还是忽高忽低。原因往往不是属性失效，而是：
-
grid-template-rows已存在且覆盖了部分行数（比如写了grid-template-rows: 100px），那只有第 2 行及之后才走grid-auto-rows，而第 1 行已固定为 100px，视觉上“不一致”其实是预期行为 - 子项设置了
min-height、height或align-self: start，导致拉伸失效，行高被内容撑开，突破grid-auto-rows的最小限制 - 容器本身没有高度约束（如没设
height或min-height），grid-auto-rows: 1fr会退化为auto，失去均分意义
想让所有行真正统一，别只靠 grid-auto-rows
依赖 grid-auto-rows 统一行高，本质是“补漏”，它只管新增的隐式行。真要全局一致，优先用显式定义：
- 已知固定行数：用
grid-template-rows: repeat(4, 120px) - 响应式动态行数：用
grid-template-rows: repeat(auto-fill, minmax(120px, 1fr)))，注意需配合容器有明确高度或嵌套在弹性上下文中 - 保留弹性又防塌陷：显式定义前几行 +
grid-auto-rows: minmax(120px, auto)，例如grid-template-rows: 150px; grid-auto-rows: minmax(120px, auto)
调试时打开开发者工具 Layout 面板，勾选 “Highlight grid tracks”，一眼就能看出哪些是显式轨道、哪些是隐式轨道——很多“不一致”问题，其实只是你没意识到某几行根本不在 grid-auto-rows 的管辖范围内。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
