grid-auto-flow只控制未显式定位的子元素在隐式网格中的填充路径，不改变已定位项、template-areas或固定行列元素；设column却横排是因为缺少grid-template-columns定义；dense模式会破坏DOM顺序，需谨慎用于无障碍场景。
grid-auto-flow 只管“没被手动安排位置”的新子元素往哪塞，不翻转已有项、不改变 template-areas、也不影响写了 grid-row 或 grid-column 的元素。
它真正控制的是隐式网格的填充路径
当子元素数量超出你用 grid-template-columns 和 grid-template-rows 显式定义的格子时，浏览器会自动创建隐式行或列来容纳它们——grid-auto-flow 决定这些新增格子怎么被填满：
-
row（默认）：从左到右扫第一行 → 扫完换第二行 → 循环 -
column：从上到下扫第一列 → 扫完换第二列 → 循环
设了 column 却还是横着排？问题不在 flow，而在结构缺失
常见误解是加了 grid-auto-flow: column 就该自动变竖排。但实际中内容仍横在一行，根本原因是：
- 没设置
grid-template-columns→ 浏览器默认只有 1 列（none），所有项全挤进“第 1 列”，而这一列无限宽 - 只写了
grid-template-rows→ 行数被锁死，没空间生成新行，系统只能把后续项硬塞进下一列第一行
✅ 正确做法：必须搭配列定义，例如
立即学习“前端免费学习笔记（深入）”；
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)));
想实现“每列最多 N 个，超了就开新列”？靠 height 封顶 + auto-rows
grid-auto-flow: column 本身不控制列容量，它只是按列“填空”。要模拟垂直流卡片墙（如三列、每列最多 4 行），得用容器高度约束：
- 设
max-height: 480px（比如 4 行 × 120px） - 配
grid-auto-rows: max-content（避免用1fr撑满剩余空间） - 再加
grid-auto-flow: column
Grid 会在高度触顶后，自动把溢出项推进下一列。
dense 模式慎用：它会打乱 DOM 顺序
row dense 或 column dense 会让后面的元素往前插，去填补跨行/跨列留下的空洞。这会导致：
- 屏幕阅读器读序 ≠ 视觉顺序
-
:nth-child(2)可能选中视觉上第五个元素 - 键盘 tab 焦点跳转异常
- RTL 布局下扫描逻辑错位
仅适合纯展示型卡片墙，且确认无语义、无障碍、交互需求。
