grid-auto-flow 控制自动放置项目的流向和填入方式，默认 row 行优先，column 列优先，dense 模式可回填空洞但可能打乱视觉顺序；仅影响未显式定位的项目，需配合 grid-auto-rows/columns 设置隐式轨道尺寸。
grid-auto-flow 控制自动放置的流向和填入方式
它不决定你显式指定位置的项目（比如用了 grid-row / grid-column 的），只影响那些没写位置、靠 grid-auto-place 机制塞进去的项目。默认是 row，意味着新项目优先往当前行填满，再开新行。
row 和 column 的实际行为差异
设容器有 grid-template-columns: repeat(3, 1fr)，但没设 grid-template-rows，此时：
-
grid-auto-flow: row→ 新项目按行优先：第1–3个占第1行，第4–6个占第2行…… -
grid-auto-flow: column→ 新项目按列优先：第1、4、7个占第1列，第2、5、8个占第2列……
注意：列优先时，行数会动态增加，视觉上像“从上到下、从左到右”填满一列再下一列，但底层仍是按列顺序分配网格轨道。
dense 模式会触发回填空洞，但可能打乱 DOM 顺序
加 dense（如 grid-auto-flow: row dense）后，布局算法会尝试把小项目塞进前面留下的空隙里。这常用于响应式卡片列表，避免大卡片下方出现长条空白。
立即学习“前端免费学习笔记（深入）”；
- DOM 顺序和视觉顺序可能不一致 —— 屏幕阅读器仍按 HTML 顺序读，而人眼看到的是填满后的样子
- 仅对自动放置的项目生效；已定位的项目不会被移动
- 性能略低，尤其在大量项目 + 频繁重排时，浏览器需多次尝试回填
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row dense;
}
和 grid-auto-rows / grid-auto-columns 的配合关系
grid-auto-flow 决定“往哪走”，grid-auto-rows 和 grid-auto-columns 决定“走出来的轨道多高/多宽”。它们只作用于隐式网格轨道（即超出 grid-template-rows/columns 定义的部分）。
- 如果只设
grid-auto-rows: 100px，但grid-auto-flow: column，那新增的列轨道高度仍是100px，宽度由grid-auto-columns或默认auto决定 - 没设
grid-auto-columns时，新列轨道宽度为auto，可能导致列宽不一致（尤其内容长度差异大）
真正容易被忽略的是：dense 模式 + 不固定轨道尺寸，会让回填行为变得不可预测 —— 尤其当项目内容高度差异大、又没设 grid-auto-rows 时，空洞大小难估计，回填结果可能每次渲染都略有不同。
