唯一可靠路径是grid-template-columns配合repeat(auto-fit, minmax())，因grid无flex-wrap开关，换行依赖列轨道动态变化；漏minmax、参数非法或父容器缺宽度均导致降级单列。
grid-template-columns 用 auto-fit + minmax() 是唯一可靠路径
只写 display: grid 和 grid-auto-flow: row，子元素在小屏下绝不会自动换行——因为 Grid 没有类似 Flex 的 flex-wrap 开关。真正触发“视觉换行”的，是列轨道数量随容器宽度动态变化，而这完全依赖 grid-template-columns: repeat(auto-fit, minmax(...)) 的写法。
常见错误是漏掉 minmax()、把第一个参数写成 1fr（非法）、或第二个参数写成 2fr（浏览器直接忽略整条声明）。
-
minmax(200px, 1fr)合法：最小 200px，最大均分剩余空间 -
minmax(1fr, 1fr)非法：第一个参数不能是弹性值，整条规则失效 -
repeat(auto-fit, 200px)非法：缺少约束函数，退化为单列
父容器宽度缺失会导致换行逻辑静默失效
auto-fit 要计算“能放几列”，必须知道容器的可用内联尺寸。如果父容器没显式宽度，Grid 就没法算——这不是报错，而是静默降级为单列，你根本看不出哪里错了。
典型场景包括：
- 父容器是 Flex 子项，但没设
flex-basis或width - Grid 容器直接挂载在
下，且没设max-width或width - Grid 容器被包裹在
position: absolute元素里，又没给宽高约束
验证方法：临时加 outline: 1px solid red 看父容器是否真有宽度。
子项实际渲染宽度超过 minmax 最小值，换行就卡死
即使 minmax(200px, 1fr) 写对了，如果子项内容（含 padding、border、字体大小）撑出的实际宽度 > 200px，Safari 和部分安卓 WebView 会拒绝生成新列，强制所有子项挤在一行里。
解决办法不是调大 min 值，而是控制子项自身：
- 确保
box-sizing: border-box已全局或局部启用 - 避免子项写
width: 100%或flex: 1——它会强行撑满单元格，覆盖轨道分配 - 对卡片类子项，用
min-width: 0防止继承导致的宽度膨胀（尤其 Safari）
移动端换行后对齐偏左？检查 gap 和 auto-fit 行为差异
auto-fit 会收缩空列，auto-fill 则保留空轨道——这在小屏上表现为最后一行子项左对齐（auto-fit）或右侧留白甚至横向滚动（auto-fill）。多数场景应选 auto-fit。
但要注意：gap 是作用于轨道之间的，不是子项 margin。如果换行后出现不对齐，大概率是子项用了 margin 干扰了 gap 计算，或者忘了给子项设 align-self: stretch（默认值，但被其他样式覆盖过）。
另外，IE11 需要额外加 grid-column-gap 和 grid-row-gap 回退，而 Safari 旧版本要求子项加 min-width: 0 才能正确触发换行判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
