auto-fit更适合卡片布局，因其合并空轨道使子项拉伸填满整行；auto-fill则硬塞满所有可能列，易致留白或横向滚动。
直接用 grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) 就能实现列数随容器宽度自动增减，但写错一个参数，它就退化成固定列或横向滚动条。
为什么 auto-fit 比 auto-fill 更适合卡片类布局
auto-fit 会把空轨道合并掉，让现有子项拉伸填满整行；auto-fill 则不管有没有内容，都按最小宽度硬塞满所有可能的列，容易在内容少时右侧留白甚至触发横向滚动。
常见错误现象：
- 内容只有 2 张卡片，容器宽 800px、
minmax(200px, 1fr)：
•auto-fit→ 生成 2 列，每列占1fr（即各 400px）
•auto-fill→ 理论可放 4 列，实际生成 4 个轨道，后 2 个为空，右侧留白 400px - 拖拽布局、日历等需要“预留槽位”的场景才选
auto-fill
Chrome DevTools 的 Layout 面板里勾选 “Show line numbers”，能一眼看出空轨道是否被折叠。
立即学习“前端免费学习笔记（深入）”；
minmax() 两个参数怎么设才不翻车
minmax() 不是“最小宽度 / 最大宽度”，而是“轨道最小可取值 / 单个轨道能拿到的最大份额”。写错会导致列宽失控或浏览器静默降级。
- 第一个参数必须是
<length>或<percentage>，不能是auto或em（字体缩放会干扰列数计算） - 第二个参数只接受
1fr或max-content，写成2fr或minmax(200px, 2fr)是无效的，浏览器会当没写 - 漏掉
minmax()，直接写repeat(auto-fit, 1fr)→ 所有列强行等分、不换行 - 把
minmax(200px, 1fr)写成minmax(200px, auto)→ 列宽失去弹性约束，auto-fit失效
子项样式和父容器设置的隐藏依赖
再正确的 grid-template-columns 也救不了被子项自己搞崩的布局。
- 子项不能设固定宽度（如
width: 200px），否则会撑破网格定义，导致换行失效或横向溢出 - 父容器必须明确设
display: grid，且子项不能用float或position: absolute，否则网格定位完全不生效 - 移动端小屏下
auto-fit不缩列？大概率是minmax()第一个参数设得太大，比如minmax(300px, 1fr)在 320px 宽屏幕上连一列都塞不下，浏览器 fallback 成单列堆叠——它其实已按规则运行，只是你预期的“多列变少列”没出现 - 配合
grid-auto-rows: minmax(100px, auto)可控制行高自适应，避免高度塌陷
真正麻烦的不是写法本身，而是 minmax() 参数之间、子项尺寸与容器宽度之间的隐式耦合——改一个值，可能同时影响列数、列宽、换行行为和视觉节奏，调试时得一起看。
