CSS Grid中强制子元素小屏换行的唯一可靠路径是grid-template-columns: repeat(auto-fit, minmax())，漏minmax、参数非法或父容器缺宽度均导致降级单列。
auto-fit 本身不“实现换行”，它只是让 Grid 在计算完列数后，把空轨道收缩掉——真正的换行效果来自 minmax() + repeat() 的组合约束。
为什么只写 grid-auto-flow: row 不会换行
这是最常被忽略的前提：Grid 默认就是 grid-auto-flow: row，但它完全不管“要不要换行”。没定义列轨道，浏览器就按单列无限宽渲染，子项全挤在一行里，溢出也不折。你看到的“不换行”，其实是 Grid 根本没生成多列轨道。
- 必须显式设置
grid-template-columns: repeat(...)，否则 Grid 不知道该切几列 -
grid-auto-columns或grid-auto-rows只影响隐式轨道（比如插太多项后自动新增的行），对初始布局无效 - 父容器若宽度为
auto（例如 flex 子项没设flex-basis，或直接挂body下没设width），Grid 就算不出“能放几列”，静默回退为单列
minmax(280px, 1fr) 的参数不能乱写
minmax() 看似简单，但两个参数有严格语义和取值限制，错一个整条声明就被浏览器忽略，降级为单列。
- 第一个参数必须是
<length></length>，比如280px、25vw；写成1fr或calc(33%)→ 声明失效 - 第二个参数只能是
1fr或max-content；写2fr、min-content、auto→ 浏览器当没写，按max-content处理，列失去弹性 - 最小值（如
280px）必须 ≥ 子项实际渲染宽度（含padding、border、字体大小）；否则 Safari 和部分安卓 WebView 强制单列 - 别忘了
box-sizing: border-box，否则padding会让内容实际变宽，突破minmax()下限
auto-fit 和 auto-fill 的行为差异直接影响留白
二者都动态生成列轨道，但空轨道处理方式不同，视觉结果差别很大：
-
auto-fit：铺完内容后，把没内容的列轨道尺寸归零，剩余空间由有内容的列用1fr均分 → 卡片/按钮始终紧凑、等宽伸缩，适合卡片列表、工具栏 -
auto-fill：保留所有可能的列轨道（即使为空）→ 小屏下容易撑宽容器、引发横向滚动，适合需要预留插槽的后台仪表盘 - 别用
auto-fill做卡片网格：按钮少时右侧大片空白，加载新项前就显得“布局未就绪”
响应式只需改 minmax() 的最小值，别重写整套规则
媒体查询里重复定义 display: grid 和整个 grid-template-columns 是冗余且易出错的。真正要调的，只有 minmax() 的第一个参数：
.cards {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)));
}
@media (max-width: 768px) {
.cards {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)));
}
}
@media (max-width: 480px) {
.cards {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)));
}
}
最小值别设太小（比如 120px），否则 Grid 可能强行塞进 4–5 列，文字不可读；也别低于 250px，小屏上卡片会窄得失去信息承载力。
IE11 完全不支持 auto-fit 和 minmax()，如果必须兼容，得用 @supports 隔离现代写法，fallback 方案只能是单列流式布局——这点很容易被上线前忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
