auto-fit 比 auto-fill 更适合卡片布局，因其会折叠空轨道使有内容的列均分剩余空间，避免右侧留白或横向滚动；而 auto-fill 强制保留所有轨道，易致空白或溢出。
直接用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 就能实现真正响应式的多列布局，不需要媒体查询，也不依赖 JS —— 但写错一个参数，它就退化成固定列、横向滚动或空白留白。
为什么 auto-fit 比 auto-fill 更适合卡片类响应式布局
两者都基于 minmax() 计算理论列数，但行为截然不同：
-
auto-fit先生成所有可能轨道，再把没子元素的空轨道「宽度归零」，剩余空间由有内容的列均分 → 卡片始终撑满整行，无右侧留白 -
auto-fill强制保留所有轨道（哪怕为空）→ 内容少时右侧大片空白，窄屏下还可能触发横向滚动条 - DevTools Layout 面板勾选 “Show line numbers”，能一眼看出空轨道是否被折叠；没折叠就是
auto-fill或auto-fit失效了
minmax(250px, 1fr) 的两个参数到底在控制什么
这不是“最小宽度 / 最大宽度”，而是单个轨道的尺寸协商边界：
- 第一个参数（
250px）是该列「不会被压缩到更小」的硬下限，必须是<length>（如px、rem），不能是em（字体缩放会干扰列数） - 第二个参数只接受
1fr或max-content；写成2fr、auto或minmax(250px, 2fr)会被浏览器静默忽略 - 真正起效的临界点是：容器宽 ≥ 单列最小宽 × 列数 +
gap总和；低于这个值，列数就会自动减少
移动端单列失效？先检查这三处硬伤
桌面正常、手机错位或卡死两列，问题几乎从不在于 repeat() 本身：
立即学习“前端免费学习笔记（深入）”；
- 漏了
<meta name="viewport" content="width=device-width, initial-scale=1">，导致移动端按桌面视口渲染 -
gap值过大（比如gap: 40px），窄屏下挤占过多空间，迫使列数提前下降甚至内容溢出 - 子元素设了
width: 300px、min-width: 280px或flex: 0 0 250px，强行顶开网格项，破坏minmax()的弹性协商逻辑
需要微调断点时，优先改 minmax() 而非加媒体查询
多数所谓“断点需求”，其实只是 minmax() 下限设得太保守：
- 先尝试缩小最小值，比如从
minmax(250px, 1fr)改为minmax(180px, 1fr)，让小屏也能塞进两列 - 仅当语义差异极大（如桌面侧边栏+主内容，手机必须上下堆叠）时，才用媒体查询重写
grid-template-columns - 避免在媒体查询里重复写
repeat(auto-fit, ...)—— 那说明你本就不该用它，直接写死1fr或2fr 1fr更清晰
最易被忽略的一点：auto-fit 的响应式能力完全依赖父容器宽度。如果外层有 max-width 但没配 margin: 0 auto，或者被 display: flex 容器错误约束，auto-fit 就失去计算依据——此时调再多 minmax 参数也没用。
