隐式行生成是机制而非bug，仅在子项数量超显式行数或grid-row指向不存在线号时触发；未设grid-auto-rows时默认auto高度，导致塌陷，需显式设置如minmax(80px, auto)控制表现。
Grid 自动生成新行不是 bug，是机制在起作用——只要子项放不下，它就必须创建隐式行来承接，否则内容就丢了。
哪些情况会触发隐式行生成
隐式行只在两种明确场景下出现：
- 子项数量超过
grid-template-rows显式定义的行数（比如只写了grid-template-rows: 100px 100px，却放了 5 个子项） - 某个子项用了
grid-row指向不存在的线号（比如grid-row: 1 / 4，但显式只定义了 2 行）
注意：grid-row: 1 / -1 不会触发——因为 -1 是容器末尾线，始终存在；但 grid-row: 1 / 99 会，浏览器得硬造出第 99 条线及中间所有隐式轨道。
为什么新行看起来“空”或“塌陷”
这不是 Grid 多生成了行，是你没管它的高度。默认 grid-auto-rows 是 auto，即按子项 min-content 高度撑开。一个空 div 或短文本，整行就塌成一条线，DevTools Layout 面板里 hover 看到 “implicit row” 就是它。
立即学习“前端免费学习笔记（深入）”；
- 没设
grid-auto-rows时，第 7 个子项单独占第三行 → 行高 = 它自身内容高度，可能只有 16px -
gap和align-content: start会让这种“矮行”更刺眼，尤其在小卡片布局里像一道裂口 -
grid-template-rows对隐式行完全无效，它只管自己定义的那几行
如何让隐式行表现可控
你删不掉隐式行，但能决定它长什么样：
- 用
grid-auto-rows: minmax(80px, auto)设底线高度，避免塌陷 - 搭配
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)))，列数响应式变化，隐式行才真正“换得自然” - 避免只写
grid-template-columns却忽略grid-auto-rows，Safari 中尤其容易出现高度异常 -
grid-auto-flow: row dense只影响填空顺序，不解决高度问题；设了grid-auto-rows: 100px才能让新项“满高进下一行”
最常被忽略的一点：隐式行是否可见、是否撑开、是否均匀，几乎全由 grid-auto-rows 控制——而它默认是 auto，不是 min-content，也不是 1fr，更不继承 grid-template-rows 的值。
