repeat(auto-fit, minmax(250px, 1fr)) 可实现免媒体查询的鲁棒卡片网格；auto-fit 收缩空轨道而 auto-fill 保留空白列，更符合“内容驱动列数”的直觉。
直接用 repeat(auto-fit, minmax(250px, 1fr)) 就能实现绝大多数卡片类响应式网格，无需媒体查询，也比手写断点更鲁棒。
为什么 auto-fit 比 auto-fill 更常用
两者都用于填充可用空间，但行为关键不同：
-
auto-fit会「收缩空轨道」——当列数超出内容所需时，多余列宽归零，剩余列自动拉伸占满容器 -
auto-fill则保留所有生成的轨道（哪怕没内容），导致空白列残留，容易撑开容器或破坏对齐 - 实际项目中，你通常希望“有多少内容就占多少列”，而不是“固定生成 N 列再塞内容”，
auto-fit更符合直觉
minmax(250px, 1fr) 的真实含义不是“最小250px最大1fr”
它定义的是单个网格轨道（即一列）的尺寸范围，但最终列宽由整个容器和所有轨道共同协商决定：
- 250px 是该列「不会被压缩到更小」的底线，不是固定宽度
- 1fr 表示「等分剩余空间」，但前提是所有列的
minmax()允许它拉伸；如果容器太窄，1fr 会被压制回 250px - 真正起效的临界点是：容器宽度 ≥ 单列最小宽 × 列数 +
gap总和。低于这个值，列数就会减少
移动端单列失效？检查这三处硬伤
常见现象：桌面端正常多列，手机上还是两列甚至错位。问题往往不在 Grid 本身：
立即学习“前端免费学习笔记（深入）”；
- 忘了加
<meta name="viewport" content="width=device-width, initial-scale=1">，导致浏览器以桌面视口渲染移动端 -
gap值过大（比如gap: 40px），在窄屏下挤占太多空间，迫使列数提前减少或内容溢出 - 子元素设置了
min-width或固定宽（如width: 300px），强行撑开网格项，破坏minmax()的弹性逻辑
需要微调断点时，优先改 minmax() 而非加媒体查询
多数场景下，repeat(auto-fit, minmax()) 已足够。真要干预，建议：
- 先尝试缩小
minmax()的最小值，比如从minmax(250px, 1fr)改为minmax(180px, 1fr)，让小屏也能塞进两列 - 仅当语义差异大（如桌面侧边栏+主内容，手机必须上下堆叠）时，才用媒体查询重写
grid-template-columns，例如：@media (max-width: 600px) { .container { grid-template-columns: 1fr; } } - 避免在媒体查询里重复写
repeat()—— 那说明你本就不该用它，直接写死列数更清晰
最易被忽略的一点：Grid 的响应式能力依赖于父容器宽度。如果 .container 外层有 max-width 且未配合 margin: 0 auto，或者被 flex 容器错误约束，auto-fit 就会失去计算依据——此时看再多 minmax 参数也没用。
