grid-auto-flow控制未显式定位的子元素在隐式网格中的填空顺序：row从左到右逐行扫描，column从上到下逐列扫描；二者均不改变坐标系或重排已定位项，仅决定“下一个空位”位置。
grid-auto-flow 控制的是那些没写 grid-row 或 grid-column 的子元素，如何填入隐式网格轨道。它不翻转整个布局，也不重排已有定位项，只决定“下一个空位在哪”。
grid-auto-flow: row 与 column 的本质区别
两者差异在于浏览器扫描空单元格的路径：
- row（默认）：从左到右扫完第1行 → 再从左到右扫第2行 → 循环
- column：从上到下扫完第1列 → 再从上到下扫第2列 → 循环
注意：这个顺序和坐标系无关。即使设了 column，grid-row: 2 依然指第二根水平线之后的行，不是“第二列”。
为什么加了 column 却还是横着排？
因为 grid-auto-flow: column 只管“往哪填”，不管“有几列”。列数必须由 grid-template-columns 明确提供：
立即学习“前端免费学习笔记（深入）”；
- 没设
grid-template-columns→ 浏览器默认只有 1 列（none）→ 所有项全挤进这一列 → 视觉上纵向堆高、溢出容器 - 正确写法示例：
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))) - 若同时写了
grid-template-rows: 100px 100px，第3个项会直接跳到第1行第2列——前两行已被“锁死”，无法生成新行
隐式轨道尺寸必须显式设置
自动创建的行或列（即隐式轨道）不会自动继承整齐尺寸：
-
grid-auto-rows必须设具体值（如120px或minmax(min-content, 120px)），否则默认为auto，高度随内容起伏，失去栅格感 -
grid-auto-columns同理。在column模式下，若没设它，新增列宽由内容撑开，容易宽窄不一
dense 模式要谨慎开启
row dense 或 column dense 允许后续项往前插空，但会破坏 DOM 顺序与视觉顺序的一致性：
- 屏幕阅读器仍按 HTML 源码读取，而用户看到的可能是第5个元素出现在第1行第2列
-
:nth-child(2)选中的可能不是视觉上第二个卡片 - 只要用了
grid-row: span 2或grid-column-start: 3这类显式定位，dense 就可能把项插进完全预料之外的位置 - IE 完全不支持
dense，包括row和column值本身
