grid-auto-flow 控制隐式网格的排列方向，默认 row（从左到右、从上到下），column 则从上到下、从左到右；dense 模式可填空但影响可访问性，需慎用。
grid-auto-flow 决定隐式网格的排列方向
隐式网格行或列的生成方向，由 grid-auto-flow 控制，不是靠 grid-template-rows 或 grid-template-columns 推断出来的。默认值是 row，意味着新项目会优先填满当前行，不够再开新行；设为 column 才会优先向下填列。
-
grid-auto-flow: row→ 新项目从左到右、从上到下（默认，最常见） -
grid-auto-flow: column→ 新项目从上到下、从左到右（适合垂直流布局） -
grid-auto-flow: row dense或column dense→ 启用“紧凑填充”，可能打乱源顺序填补空洞，慎用
row 和 column 模式对 grid-template 的影响不同
显式定义的轨道（grid-template-rows/grid-template-columns）只约束显式网格；隐式部分完全由 grid-auto-flow + grid-auto-rows/grid-auto-columns 共同决定。比如你写了 grid-template-columns: 100px 100px，但设了 grid-auto-flow: column，后续项目仍会按列方向新增隐式行，而不是扩展列数。
- 显式列数固定时，
grid-auto-flow: column会导致隐式行不断增长，而非新增列 - 想让隐式部分也按列扩展？必须配合
grid-auto-columns，且确保grid-auto-flow是column -
grid-auto-rows只在row模式下生效（控制隐式行高），grid-auto-columns只在column模式下生效（控制隐式列宽）
容易被忽略的 dense 模式副作用
dense 关键字会让 Grid 尝试回填之前留下的空格，但它不改变 DOM 顺序，只改变视觉位置——这会导致可访问性问题（屏幕阅读器仍按源序读）、打印样式错乱、甚至影响 :nth-child() 选择器行为。
- 仅当明确需要填满空白且不依赖视觉顺序时才启用
dense -
grid-auto-flow: row dense不等于“自动重排”，它不会移动已有项目的起始位置，只把后续项目塞进空隙 - 测试时务必检查键盘焦点顺序和语义结构是否仍合理
浏览器兼容性与 fallback 注意点
所有现代浏览器都支持 grid-auto-flow，包括 dense，但 IE 完全不支持 Grid，所以如果需兼容旧环境，不能只靠它做关键布局逻辑。
立即学习“前端免费学习笔记（深入）”；
- Flexbox 无法替代
grid-auto-flow: column的隐式列行为（Flex 的flex-direction: column不会自动创建新列） - 用
@supports (display: grid)包裹 Grid 相关规则是稳妥做法 - 隐式轨道尺寸（如
grid-auto-rows: minmax(100px, auto)）在 Safari 旧版本中对minmax()支持不稳定，建议简单值优先
grid-auto-flow，后续所有隐式轨道的生成逻辑都会偏移，而且很难从表现反推原因。 
