关于 CSS 中的 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 影响；该属性仅作用于那些没有被手动定位的“剩余项”。
