grid-auto-flow 由 Grid 容器控制未显式定位子元素的填充顺序，决定其按行、列或紧凑方式填入隐式网格空位，不生成轨道也不影响尺寸。
grid-auto-flow 是谁在控制排列？
grid-auto-flow 不是“自动排版”的开关，而是告诉 Grid 容器：当子元素没被显式定位（比如没写 grid-row/grid-column），该按什么顺序往空格子里塞。它不决定格子大小，也不生成轨道，只管“填空”的策略。
常见错误现象：grid-template-rows: 100px 100px 定义了两行，但放了 5 个子项，结果全挤在第一行——其实是 grid-auto-flow: row（默认值）让它们横向填满第一行后，才换到下一行；而你忘了设置列数或列宽，导致列无限宽、单行吞掉全部内容。
-
grid-auto-flow: row：优先填满当前行，再往下走（默认） -
grid-auto-flow: column：优先填满当前列，再往右走 -
grid-auto-flow: row dense或column dense：启用“紧凑填充”，允许回填前面留下的空洞（比如某子项跨了两行，中间漏了个格子，dense 会把后续小元素塞进去）
为什么设置了 grid-template-columns 还不自动换行？
隐式网格的“自动”只发生在**显式轨道之外**。如果你写了 grid-template-columns: repeat(3, 1fr)，但没写 grid-template-rows，那么行方向就是隐式的——新行会按需生成，grid-auto-flow 才真正起作用。
反例：写了 grid-template-rows: 200px 且没设 grid-auto-rows，又放了超出行数的子项，那些多出来的项会被压扁在第一行里（因为行高固定、无隐式行生成），此时调 grid-auto-flow 没用。
立即学习“前端免费学习笔记（深入）”；
- 要让列数固定、行数自适应：只定义
grid-template-columns，别锁死grid-template-rows - 需要隐式行有高度？补上
grid-auto-rows: 100px，否则隐式行默认高度为auto（可能塌陷） - 列方向流动时，记得同时设
grid-auto-columns，否则隐式列宽为auto，容易撑破容器
grid-auto-flow: dense 真的能“优化空间”吗？
能，但代价是 DOM 顺序和视觉顺序错位。dense 不改变子元素的源顺序，只调整渲染位置。对可访问性（如屏幕阅读器）、键盘焦点流、甚至 CSS :nth-child() 选择器都有影响。
典型误用场景：用 dense 强行把标题塞进文章卡片之间的空隙，结果 tab 键焦点跳转混乱，或者打印样式错乱。
- 仅在视觉优先、无障碍要求低的展示型布局中考虑
dense -
dense对性能有轻微影响（需二次遍历找空洞），大量子项时不建议开启 - 它不会重排已显式定位的元素（比如写了
grid-column: 2 / 4的项），只影响未定位的“自由项”
Chrome DevTools 里怎么看隐式网格生成了没？
打开 Elements 面板 → 选中 Grid 容器 → 右侧 Styles 标签页下拉到底，展开 Grid 区域。这里会明确标出“Explicit grid”和“Implicit grid”两块，后者显示当前隐式行/列的数量和尺寸。
常见盲区：你以为加了 grid-auto-rows: 80px 就万事大吉，但 DevTools 显示“Implicit grid rows: 0”——说明根本没触发隐式行生成，大概率是子项都被显式定位了，或者容器高度限制太死，子项被压缩到看不见。
- 检查子项是否意外带了
grid-row或grid-area - 临时加
outline: 1px solid red到子项，确认是否真被渲染出来 - 隐式轨道只有在“需要填空”时才创建，不是声明了就存在
