grid-auto-rows仅控制隐式行高度，不触发行生成；真正触发行创建的是子项越界或grid-auto-flow: row的自动填充逻辑，且需配合列定义和非锁定的grid-row定位。
grid-auto-rows 不是“开关”，它只管隐式行的高度
设了 grid-auto-rows 并不会让网格“开始自动加行”，它只是告诉浏览器：当隐式行真的被创建出来时，高度该是多少。真正触发行生成的，是子项位置越界或 grid-auto-flow: row 下的自动填充逻辑。
常见错误现象包括：
- 写了
grid-auto-rows: 100px却没看到新行——大概率是子项被grid-row锁死在第 1 行，或根本没列定义（grid-template-columns缺失），导致所有项挤在同一列里 - 10 个子项只显示前 6 个——检查是否用了
grid-template-rows: 1fr 1fr且没配grid-auto-rows，多出的项会被强行压进前两行，而非换行 - 设置了
grid-auto-rows: auto，但某些行高度为 0——auto在无内容或子项height: 0时会塌陷，生产环境应避免
必须配合 grid-auto-flow: row（默认值）才能触发自动填行
grid-auto-flow 决定“怎么填空”，不是“要不要填”。默认 row 就是横向优先填满当前行再开下一行；如果设成 column，则会纵向优先填满当前列再开新列——此时新增的是隐式列，grid-auto-rows 完全不生效。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 子项不能显式指定
grid-row（如grid-row: 1），否则会卡住不动，阻断自动流程 - 必须有列定义（
grid-template-columns或grid-auto-columns），否则grid-auto-flow: row会把所有项塞进第 1 列，看起来像“没换行” -
grid-auto-flow: dense会回头填空洞，但 DOM 顺序和语义不变，屏幕阅读器仍按源码读，:nth-child()匹配也不变——视觉错位风险高，慎用
grid-auto-rows 值怎么写才不容易翻车
它支持和 grid-template-rows 相同的语法，但不能依赖 auto，也不建议用 0（轨道存在但不可见，内容可能溢出）。
推荐写法：
-
grid-auto-rows: minmax(min-content, max-content)——紧凑但保内容完整，适合文字卡片类布局 -
grid-auto-rows: 80px——固定高度，适合头像、图标等尺寸一致的元素 -
grid-auto-rows: minmax(60px, 1fr)——最小高度兜底，剩余空间均分，需容器有明确高度约束（如height: 500px） -
grid-auto-rows: repeat(3, 50px)——注意：这不会生成 3 行，而是把每个隐式行都设为 50px 高
开发者工具里怎么看隐式行是否真被创建了
Chrome / Edge 的开发者工具 Layout 面板中，灰色虚线轨道就是隐式轨道；控制台若出现类似 Grid row 5 is not defined 的提示，说明已触发隐式生成逻辑。
最容易被忽略的细节是：grid-auto-flow 和 grid-auto-rows 是解耦的——一个决定“往哪扩”，一个决定“扩多大”，两者缺一不可。只调一个，等于只装了方向盘不踩油门，车不会动。
