grid本身无自动换行开关，多行效果源于grid-template-columns中auto-fit/auto-fill配合minmax()动态增减列轨道；仅设display: grid和grid-auto-flow: row不会换行，因未定义列宽约束，浏览器默认单列无限宽处理。
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()
minmax() 参数必须严守规则
minmax() 不是“最小宽 / 最大宽”，而是“轨道最小可取值 / 单个轨道最大能分到的份额”。写错一个参数，整个函数被忽略，浏览器静默回退为单列。
- 别写
minmax(200px, 200px)—— 这等于固定宽度，失去弹性 -
1fr在minmax()中是合法且推荐的，不是“单位错误” - 若需最小宽度为内容自适应（如按钮），可用
minmax(min-content, 1fr)，但注意min-content可能导致过窄列 - 直接写
repeat(auto-fill, 200px)看似简单，但 Grid 会严格按 200px 切分列轨道，哪怕容器只剩 190px 宽，也会强行撑出一列导致水平滚动
auto-fit vs auto-fill：末行表现差异
auto-fill 保留所有空轨道，auto-fit 合并空轨道让剩余列拉伸占满空间。对换行逻辑而言，两者都有效，但行为不同：
-
auto-fill更适合需要列宽一致的场景（比如卡片墙），末行有空位也保持列宽统一 -
auto-fit更适合按钮组等希望末行填满的场景，但要注意 Safari 下可能因隐式行高度塌陷导致错位 - 二者都必须配合
minmax()才能响应宽度变化；只写repeat(auto-fit, )却没设minmax()，换行不会发生 - 如果子项设置了
grid-column或grid-row，会干扰自动布局，换行可能失效
换行后对齐和间距的坑
justify-content: space-between 在单行时正常，一旦换行，末行子项可能左对齐、显得稀疏。这是因为 Grid 的 justify-content 作用于整行轨道，不是每行独立对齐。
- 正确做法是用
justify-items控制子项在单元格内的对齐，再配合gap统一间距 -
gap: 12px比margin更干净，不会影响 Grid 轨道计算 -
justify-items: stretch（默认）能让子项填满单元格；设为start则左对齐，但末行依然可能不均布 - 没有纯 CSS 的“末行
justify-content”等效方案，这是 Grid 的固有限制
真正容易被忽略的是：容器必须有明确宽度（比如 width: 100% 或作为 flex item 存在），否则 Grid 可能按内容宽渲染，根本看不出换行效果；另外，minmax() 中的最小值必须小于子项实际占用宽度（含 padding/border），否则轨道计算会保守退化为单列。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
