grid多行效果取决于grid-template-columns中auto-fit/auto-fill与minmax()的正确配合，而非grid-auto-flow；必须确保容器有明确宽度且子项实际宽度不超过minmax()最小值。
Grid 本身没有“自动换行”开关，所谓多行效果，本质是列轨道数量随容器宽度动态增减的结果——关键在 grid-template-columns 的写法，不是靠 grid-auto-flow 单独控制。
为什么只写 display: grid 和 grid-auto-flow: row 不会换行
这是最常踩的坑：grid-auto-flow: row 只是告诉浏览器“新项优先往右填”，但它不定义列宽、不生成列轨道。没列约束，浏览器默认按单列无限宽处理，所有子项横着挤成一行，溢出也不折。
- 常见错误：只设
grid-auto-columns: 1fr或grid-auto-rows: 100px—— 这些只影响隐式轨道，对顺序排列的子项完全无效 -
grid-auto-flow: row是默认值，显式写上也没用，除非你同时改了column或dense - 真正触发多行视觉效果的，是
grid-template-columns中用了auto-fit或auto-fill配合minmax()
repeat(auto-fit, minmax()) 的参数必须严守规则
minmax() 不是“最小宽 / 最大宽”，而是“轨道最小可取值 / 单个轨道最大能分到的份额”。写错一个参数，整个函数被忽略，浏览器静默回退为单列。
- 第一个参数必须是
<length></length>（如150px、25vw），不能是1fr—— 否则整条声明失效 - 第二个参数只能是
1fr或max-content；写2fr、calc(33%)均无效，浏览器回退到max-content，列失去弹性 - 最小值（如
150px）必须 ≥ 子项实际渲染宽度（含padding、border、字体大小），否则 Safari 和部分安卓 WebView 强制单列
父容器宽度缺失是换行失效最常被忽略的前提
auto-fit 和 auto-fill 要计算“能放几列”，必须知道容器的可用内联尺寸。如果这个前提不成立，Grid 根本没法算，直接降级为单列。
- 父容器是
flex子项但没设flex-basis或width，宽度为auto - Grid 容器自身没设
width、max-width，又直接挂载在下 - 子项写了
width: 100%或flex: 1，强行撑满单元格，覆盖轨道分配逻辑 - 忘了
box-sizing: border-box，padding撑出额外宽度，让实际内容宽 >minmax()的最小值
auto-fit 和 auto-fill 的行为差异直接影响末尾留白
二者都动态生成列轨道，但空轨道处理方式不同，直接影响布局紧凑度和滚动行为：
-
auto-fit：铺完后把空列尺寸归零，剩余空间由有内容的列用1fr均分 → 更紧凑，适合按钮组、卡片列表等内容密集型场景 -
auto-fill：保留所有可能列轨道（即使为空）→ 小屏下容易撑宽容器、引发横向滚动，适合需预留插槽的后台仪表盘 - 当子项数量 ≥ 当前列数时，二者行为一致；差异只在内容不足时显现
真正卡住的，往往不是语法写错，而是容器宽度和子项实际渲染宽度这两个隐含前提没被满足——它们不报错，但会让整个换行逻辑静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
