grid-auto-flow: row 仅控制项目按行优先填充顺序，是否换行取决于 grid-template-columns 等轨道定义；无列约束时所有项目挤在一行，真正实现换行需配合 auto-fit/auto-fill 与 minmax() 或显式行高。
grid-auto-flow: row 是默认值，但换行得靠 grid-template-columns
很多人以为 grid-auto-flow 设成 row 就能自动“换行”，其实不是。它只控制新增项目的放置顺序（先填满第一行再填第二行），但**是否真能换行，取决于容器有没有显式定义列宽约束**。没设 grid-template-columns 或用 auto-fit/auto-fill 配合 minmax()，项目就全挤在一行里，溢出也不折。
-
grid-auto-flow: row本身不触发换行，只是“按行优先填” - 真正起作用的是列轨道定义：比如
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)))) - 如果只写
grid-auto-flow: row却没设列，浏览器按单列无限宽处理，所有项目横着排满一行
想让项目“强制断行”，用 grid-auto-flow: dense + 显式行高控制
当你要跳过空缺、填满网格间隙，并配合固定行数时，grid-auto-flow: dense 才有意义。但它不能单独实现“换行”，必须搭配 grid-template-rows 或 grid-auto-rows 来限制每行高度，否则项目仍会撑开容器。
-
grid-auto-flow: dense只影响布局顺序，不改变换行逻辑 - 加
grid-auto-rows: 100px后，新项目超出当前行高度就会进下一行 - 注意：
dense可能打乱 DOM 顺序的视觉呈现，屏幕阅读器仍按源码读，无障碍需额外处理
常见错误：grid-auto-flow 和 flex-wrap 混淆
有人把 Grid 当 Flex 用，试图用 grid-auto-flow 实现类似 flex-wrap: wrap 的效果，结果失败。Flex 的 wrap 是弹性盒子的固有行为；Grid 的“换行”本质是**轨道数量动态变化**，不是流式包裹。
- Flex 布局中
flex-wrap: wrap是默认允许换行的开关 - Grid 中没有等价的“wrap 开关”，必须靠列轨道定义（如
auto-fit）或显式行高来间接达成 - 错误示例：
display: grid; grid-auto-flow: row; /* 没有列定义 */→ 所有子项仍在一行
移动端适配时，minmax() 里的 min 宽度设太小会导致换行失效
用 repeat(auto-fit, minmax(120px, 1fr))) 在小屏上看似合理，但如果内容实际宽度远超 120px（比如带 padding 的卡片），而容器又不够宽，minmax() 会退化为单列，看起来像“没换行”。这不是 bug，是 Grid 轨道计算的保守策略。
立即学习“前端免费学习笔记（深入）”；
- 检查真实渲染宽度：用 DevTools 看每个 grid item 的 computed width
- 把
minmax(120px, 1fr)改成minmax(min-content, 1fr)可缓解，但可能引发高度不一致 - 更稳妥的做法是加媒体查询，在小屏改用
grid-template-columns: 1fr强制单列
事情说清了就结束。Grid 的“换行”从来不是靠一个属性开关，而是轨道定义、内容尺寸、容器约束三者共同作用的结果。最容易被忽略的是：你看到的“没换行”，大概率是因为没给列轨道留出收缩空间。
