隐式轨道仅在子项超出显式行列定义或指定越界网格线时严格触发，浏览器不会凭空创建，只在内容装不下时补位；常见误判包括未设行高导致子项挤在首行、auto-fit列不触发隐式列等。
隐式轨道只在两个明确时刻被触发
它不是“偷偷”生成，而是严格按规则响应：子项数量超出显式行列定义，或子项显式指定了超出范围的网格线（比如 grid-row: 5 但只写了 grid-template-rows: 100px 100px）。浏览器不会凭空造轨道，只在装不下时补位。
常见误判场景：
- 写了
grid-template-columns: 1fr 1fr却没设grid-template-rows，放了 5 个子项 → 看似“应该换行”，实则所有子项都挤在第 1 行，因为显式行数为 0，隐式行未被触发（grid-auto-flow: row默认行为是横向填满当前行，但没有行高约束，内容撑开整行） - 用了
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)))→ 所有列都是显式生成的，grid-auto-columns完全不生效，根本不会触发隐式列 - DevTools Layout 面板里看到灰色虚线轨道，就是隐式轨道；控制台若报
Grid row X is not defined，说明已进入隐式生成逻辑
grid-auto-flow 不生成轨道，只决定“往哪塞”
grid-auto-flow 控制的是自动定位算法的填空顺序，不是轨道创建开关。它不负责“建行建列”，只管“新项目该插进哪个已有空位”。默认 row 模式下，它从左到右、从上到下找第一个空格；column 模式则从上到下、从左到右。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 写了
grid-auto-flow: row dense后，视觉上项目“跳格子”，其实是它回头填了前面被跨行/跨列留下的空洞——DOM 顺序没变，但屏幕阅读器仍按源码读，:nth-child()也照旧匹配，语义和视觉错位 - 想让长列表垂直流式排列（如时间线），必须配
grid-auto-flow: column+grid-auto-columns；只改flow不设auto-columns，隐式部分只会不断加行，不会新增列 -
grid-auto-flow和grid-auto-rows/grid-auto-columns是解耦的：一个管方向，一个管尺寸，缺一不可
grid-auto-rows / grid-auto-columns 只作用于“凭空多出来的”轨道
它们对 grid-template-rows 或 grid-template-columns 定义的显式轨道完全无效。默认值是 auto，但在生产环境几乎不能依赖——内容高度浮动、父容器无高度、子项无最小高度时，极易塌陷。
安全写法建议：
-
grid-auto-rows: minmax(48px, max-content)—— 保底可读高度，内容多时自动撑开，适配字体缩放 - 避免
grid-auto-rows: 60px这类固定值：小屏放大字体后文字溢出，大屏又显空 - 仅当容器有明确高度（如
height: 600px）时，才考虑1fr，否则空行可能占满视口 - 设了
grid-auto-rows但子元素仍塌成一条线？检查子元素是否写了min-height: 0、height: 0，或外层用了display: contents，这些都会干扰align-items: stretch的拉伸行为
动态插入内容时，隐式轨道最容易失控
JS 动态新增元素后布局错位，往往不是插入顺序错了，而是 grid-auto-flow: row（默认值）优先复用已有空轨道，而不是追加到末尾。比如三列布局已有 7 项（两行+一格），第 8 项会填进第二行第二个空位，而非第三行第一列。
关键防御点：
- 显式定位过的项（如
grid-row: 2）会留下“坑”，row模式会主动填坑，视觉上就是错位 - 嵌套子网格必须显式声明
display: grid，否则子元素退化为普通块级流，看起来像错位 - 子项用了
float、position: absolute，或包裹在display: flex容器里 → Grid 轨道计算中断，auto-fit类响应式逻辑直接失效 - 图片别用
<img>直接塞进 Grid 项，加载前高度为 0，一加载就重排整行；换成background-image+aspect-ratio+object-fit更稳
grid-auto-flow 决定往哪扩，grid-auto-rows/grid-auto-columns 决定扩多大，两者必须配合，缺一不可。 
