CSS Grid布局中怎样实现自动流向（grid-auto-flow）？

grid-auto-flow仅控制未显式定位的新项填空方向，不翻转已有项；设column却横排是因未定义列结构，dense会破坏DOM与视觉顺序一致性。

grid-auto-flow 不是“实现自动流向”的开关，它只决定未显式定位的新项往哪填空——填行？填列？还是见缝就插？设了不等于布局会自动适配，漏掉关键约束就白配。

为什么 grid-auto-flow: column 还是横着排？

根本不是属性没生效，而是浏览器没看到“列结构”：

• 只写 display: grid; grid-auto-flow: column; → 浏览器默认列数为 none，所有项全塞进“第 1 列”，这一列无限宽，自然横排
• 必须配合列定义，比如 grid-template-columns: repeat(3, 1fr) 或响应式写法 repeat(auto-fit, minmax(200px, 1fr)))
• 如果同时写了 grid-template-rows: 100px 100px（固定两行），column 模式会让第 4 个项直接跳到第 1 行第 2 列，而不是往下堆——行高被锁死，没空间生成新行

grid-auto-flow: row 为什么还不换行？

row 是默认值，它本身不创建列轨道，也不触发换行：

• 只写 display: grid; grid-auto-flow: row; → 所有项横排一行，溢出也不折
• 真正触发“视觉换行”的，是 grid-template-columns 或 grid-auto-columns 定义了列宽或列数
• grid-auto-rows: 1fr 影响新行高度，但不决定“要不要换行”——换行由列轨道数量变化驱动
• 移动端用 minmax(120px, 1fr) 时，若卡片带 padding 后实际宽度 > 容器可用宽度，auto-fit 会退化为单列，这是 Grid 轨道计算的预期行为

row dense 和 column dense 的真实代价

dense 不是“更智能的换行”，它是回填算法，会破坏 DOM 顺序与视觉顺序的一致性：

立即学习“前端免费学习笔记（深入）”；

• DOM 中第 5 个元素可能被插进第 1 行第 2 列的空隙，而第 2 个元素还在第 2 行
• 屏幕阅读器仍按源码读，键盘 tab 顺序也照旧，语义和可访问性直接受损
• 只要存在 grid-row-start: 2 或 grid-column: span 3 这类跨格声明，dense 就可能让后续项“跳”到意料之外的位置
• grid-template-areas 已定义区域内的项，dense 完全不起作用；它只影响落入隐式网格的未命名项

真正需要“流向切换”时该怎么做？

别依赖 grid-auto-flow 动态改值——它不翻转已有项，也不重排已渲染内容。所谓“切换”，本质是改写 CSS 规则并触发重排：

• 响应式场景（如横排变竖排），应直接切换整套网格定义：@media (max-width: 768px) { grid-template-columns: 1fr; grid-auto-flow: column; }
• 想控制“每列最多 N 个项”，光靠 grid-auto-flow: column 不行；需结合容器高度封顶 + grid-auto-rows: max-content，例如 max-height: 96px; grid-auto-rows: max-content;
• IE 完全不识别 grid-auto-flow，包括 row 和 column，一律退化为默认行为；dense 在所有旧版浏览器中无效

最容易被忽略的点：显式设置了 grid-row 或 grid-column 的项，完全不受 grid-auto-flow 影响；它只管那些没被手动放位置的“漏网之鱼”。