grid-auto-rows 控制隐式网格行的高度，仅作用于超出 grid-template-rows 显式定义范围的自动创建行；需配合容器高度约束才能生效，与 grid-template-rows 共存时后者优先。
grid-auto-rows 是什么，它管哪部分？
grid-auto-rows 只负责「自动创建的行轨道」的高度，不是整个网格容器的高度，也不控制已有 grid-template-rows 定义的行。当子元素超出你显式定义的行数（比如只写了 grid-template-rows: 100px 200px，但实际有 5 个子项），后续那些“没被模板覆盖”的行，就靠 grid-auto-rows 来定高。
常见错误现象：grid-auto-rows: 1fr 写了但内容还是溢出容器、被裁剪，或者高度为 0 —— 很可能是因为父容器没设 height 或 max-height，1fr 没有参考基准可分。
- 使用场景：动态插入卡片、列表项数量不确定、响应式中行数随断点变化
- 参数差异：
grid-auto-rows: auto让每行按内容撑开；grid-auto-rows: minmax(100px, max-content)更稳妥，防过小或过大 - 性能影响：避免在大量子项时用
1fr+ 无高度限制的容器，浏览器需反复重排计算分配
为什么 overflow: auto 不总能滚动？
隐式网格行本身不触发滚动；滚动取决于「网格容器」是否产生了块格式化上下文（BFC）且内容溢出其块级尺寸。如果容器高度未约束，grid-auto-rows 生成的行会不断往下堆，容器高度无限增长，overflow: auto 就没触发条件。
常见错误现象：加了 overflow: auto 却无法滚动，检查 computed height 是不是 auto 或 fit-content。
- 必须给容器设明确的
height、max-height或min-height（哪怕只是max-height: 50vh） -
display: grid容器默认是block，但若父级是 flex/grid 且未设尺寸，它可能收缩——此时要向上追查尺寸来源 - 别依赖
grid-auto-rows: 1fr来“填满剩余空间”再滚动：1fr 是分配剩余空间，不是限制高度
grid-auto-rows 和 grid-template-rows 混用时的坑
两者共存时，grid-template-rows 优先级更高，它定义的是“显式网格行”，grid-auto-rows 只兜底后面多出来的行。但很多人误以为写成 grid-template-rows: 100px; grid-auto-rows: 1fr 就能让所有行都占满剩余空间——其实只有第 2 行及之后的隐式行才用 1fr，第一行还是固定 100px。
常见错误现象：前几行高度正常，后面突然变矮/变高/错位，尤其配合 grid-row-start/end 跨行时更易混乱。
- 想统一控制所有行（含隐式）高度？直接用
grid-auto-rows，别写grid-template-rows（除非真需要首几行特殊） - 如果必须混合，注意：显式行数 =
grid-template-rows的轨道数；隐式行从第n+1行开始，由grid-auto-rows管理 - 兼容性提醒：IE 完全不支持
grid-auto-rows，如需兼容，得降级为 JS 控制或用 flex 模拟
调试隐式行是否生成？
最直接的办法是打开浏览器开发者工具，选中网格容器，在 Layout 面板里看 Grid overlay —— 显式行会标数字（1, 2…），隐式行通常显示为虚线轨道，且带 “auto” 标注。没看到虚线？说明子项还没溢出显式范围，grid-auto-rows 根本没生效。
常见错误现象：“明明写了 grid-auto-rows: 50px，但新元素加进来高度不对”——先确认它是否真的落在隐式区域（比如用了 grid-row: 10 却只定义了 3 行显式轨道）。
- 临时加边框辅助判断：
* { outline: 1px solid red !important; }快速看子项落点 - 用
grid-row: -1或大数值（如grid-row: 99）强制触发隐式行，验证样式是否生效 - 注意：
grid-auto-flow: column时，起作用的是grid-auto-columns，不是grid-auto-rows—— 别配错方向
隐式网格行不是“后备方案”，它是 CSS Grid 动态布局的核心机制之一；但它的行为完全依赖显式约束是否存在、是否合理。没设容器高度、混用模板与自动值、忽略方向模式，这三类问题占了调试的八成以上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
