CSS Grid布局自动流向（grid-auto-flow）如何实现？

关于 `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` 影响；它只影响那些没有被手动放置位置的“漏网之鱼”。