隐式网格由浏览器在网格项目超出显式定义行列数或指定超出范围的网格线时自动创建；其轨道尺寸由grid-auto-rows/columns控制，填空方向由grid-auto-flow决定。
隐式网格是怎么自动产生的
隐式网格不是你“写出来”的，而是浏览器在你没定义足够轨道时，被动补出来的。它只在两种明确场景下触发：一是网格项目数量超过显式定义的行列数（比如你只写了 grid-template-columns: 1fr 1fr，却放了 5 个子元素）；二是你用 grid-row 或 grid-column 显式指定了超出范围的网格线（比如写 grid-column: 5 / 6，但总共只定义了 2 列）。
grid-auto-rows 和 grid-auto-columns 控制隐式轨道尺寸
默认情况下，隐式行高/列宽是 auto——意味着完全由内容撑开，容易导致高度不一致、视觉松散。这不是 bug，是设计使然，但几乎从不适用于生产环境。
-
grid-auto-rows只影响**自动生成的行轨道**，对grid-template-rows定义的显式行无效 -
grid-auto-columns同理，只作用于隐式列 - 推荐用
minmax(100px, auto)而非单纯100px：既保底最小高度，又允许内容多时自然撑开 - 若设为
0或1px，可能造成内容被裁切或布局塌陷，尤其配合overflow: hidden时
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(120px, auto); /* 所有隐式行都至少 120px 高 */
gap: 12px;
}grid-auto-flow 决定“补位方向”和填空逻辑
它不生成隐式网格，但决定了新项目往哪“塞”，从而间接影响隐式轨道是否被创建、以及创建多少。
-
grid-auto-flow: row（默认）：按行优先填满，填不满就新增一行 → 多数情况产生**隐式行** -
grid-auto-flow: column：按列优先填满 → 更容易产生**隐式列**（尤其当容器窄、内容高时） -
grid-auto-flow: dense：启用“紧凑填充”，会回头填前面留下的空洞 → 可能减少隐式轨道数量，但会让 DOM 顺序与视觉顺序错位，影响可访问性
为什么你总看到“空白行”或“列错位”
最常见原因是：你用了 grid-column 或 grid-row 定位，但没配 grid-auto-rows/columns，结果隐式轨道按 auto 渲染，高度/宽度为 0 或极小值，看起来像消失了一样。
立即学习“前端免费学习笔记（深入）”；
- 检查控制台是否报
Grid row/column X is not defined类警告（部分浏览器会提示） - 用开发者工具选中网格容器，看“Layout”面板里是否出现灰色虚线轨道——那就是隐式轨道
- 别依赖
gap掩盖问题：gap不作用于隐式轨道之间的间距，只作用于显式轨道之间
隐式网格本身没有“命名线”，它的线编号紧接显式线之后（比如显式定义了 3 列，就有列线 1–4；第 4 列之后的隐式列线就是 5、6…），这点在用负索引（如 grid-column: -2）时容易误判。
