Grid自动换行本质是grid-template-columns配合minmax()动态生成列轨道，而非grid-auto-flow控制；需确保父容器有明确宽度、子项不撑满单元格、box-sizing正确，且minmax()参数合规（如minmax(120px, 1fr)）。
Grid 本身没有 flex-wrap 那样的开关，所谓“自动换行”，本质是列轨道数量随容器宽度动态变化的视觉效果——关键在 grid-template-columns 的写法，不是靠 grid-auto-flow 单独控制。
为什么只写 display: grid 和 grid-auto-columns 不会换行
常见错误是以为设了 grid-auto-columns: 1fr 就能自动分列。其实 grid-auto-columns 只在子项被显式定位到未声明列（比如 grid-column: 5）时才生效；顺序排列的元素根本不会触发它。结果就是所有项挤在单列里横向溢出。
- 真正起作用的是
grid-template-columns: repeat(auto-fit, minmax(...)) -
auto-fit和auto-fill都能动态生成列轨道，但行为不同：auto-fit会收缩空列，auto-fill保留空轨道（可能导致末尾留白或横向滚动） - 漏掉
minmax()或参数写错（如repeat(auto-fit, 200px)），浏览器无法推导约束，直接降级为单列
minmax(120px, 1fr) 的参数必须严守规则
minmax() 第一个参数是轨道最小可取值，第二个是单个轨道最大能分到的份额。写错会导致静默失效：
- 第一个参数必须是
<length>（如120px、25vw），不能是1fr—— 否则整个函数被忽略 - 第二个参数只能是
1fr或max-content；写2fr、calc(33%)等均无效，浏览器回退到max-content，列宽失去弹性 - 最小值（如
120px）必须 ≥ 子项实际渲染宽度（含padding、border、字体大小），否则 Safari 和部分安卓 WebView 会强制单列
父容器宽度缺失是换行失效最常被忽略的前提
auto-fit / auto-fill 要计算“能放几列”，必须知道容器的可用内联尺寸。如果父容器没明确宽度，Grid 就没法算：
立即学习“前端免费学习笔记（深入）”；
- 父容器是
flex子项但没设flex-basis或width，宽度为auto - Grid 容器自身没设
width、max-width，又不在有约束的上下文里（比如直接挂载在<body>下） - 子项写了
width: 100%或flex: 1，强行撑满单元格，覆盖轨道分配逻辑 - 忘了
box-sizing: border-box，padding撑出额外宽度，让实际宽度超过minmax()的最小值
换行不是 Grid 的“功能”，而是列轨道动态增减的结果；真正容易卡住的，往往不是语法，而是容器宽度和子项实际渲染宽度这两个隐含前提。
