应使用 auto-fit 而非 auto-fill 实现真正自适应列数，auto-fit 会收缩空轨道并让有内容的列均分剩余空间，配合 minmax(固定值, 1fr) 和合理处理 gap 才能正确响应式布局。
auto-fill 会预占所有可能列，不是“自适应”的万能解
很多人写 repeat(auto-fill, minmax(250px, 1fr))) 是冲着“自动适配列数”去的，结果发现小屏下右侧留白、DevTools 里 grid-column-end 显示 5 却只渲染 2 个子项——这不是 bug，是 auto-fill 在严格执行规则：它按 minmax() 下限（比如 250px）算出理论最大列数，然后全部生成轨道，哪怕空着也占位。
常见错误现象包括：
- 手机竖屏只显示 1 张卡片，但右边明显多出一列空白区域
- 容器设了
overflow-x: hidden，却仍触发横向滚动条 - 卡片文字突然折行、图片被横向拉伸变形
这些都不是 Grid 失效，而是 auto-fill 的设计意图被误用。它本质是“预留槽位”，不是“响应式填充”。
真正该用 auto-fit 的场景，90% 都被 auto-fill 占了坑
日常卡片列表、商品墙、仪表盘数据块，几乎都该换 auto-fit。它会在生成轨道后，把没内容的空轨道尺寸收缩为 0，再让有内容的列用 1fr 均分剩余空间。
立即学习“前端免费学习笔记（深入）”；
只需改一个词：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)));
效果立刻不同：
- 1 个卡片 → 占满整行
- 2 个卡片 → 各占 50%
- 4 个卡片 → 四等分，不留空列
注意：auto-fit 必须配合 minmax()，写成 repeat(auto-fit, 280px) 是无效的，浏览器直接忽略。
minmax() 两个参数写错，auto-fill/auto-fit 全部失效
minmax() 不是“最小宽度 + 最大宽度”，第一个参数是轨道**最小可取值**，第二个是单轨道在弹性分配中能拿到的**最大份额**。
以下写法都会导致降级或失控：
-
minmax(280px, 2fr)→2fr在 max 位置非法，静默退化为max-content，列宽撑破容器 -
minmax(280px, auto)→ 同样退化为max-content，失去弹性约束 -
minmax(1px, 1fr)→ 浏览器有最小轨道限制（通常 ≥10px），实际可能只出 1 列
唯一安全组合是：
-
minmax(<length-percentage>, 1fr)</length-percentage>（推荐） -
minmax(<length-percentage>, max-content)</length-percentage>（适合内容驱动宽度）
gap 会偷偷吃掉可用宽度，导致列数比预期少一列
gap 被计入容器总宽，但 minmax() 的第一个参数只管单列宽度。例如：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)));<br>gap: 1rem;
在 920px 宽容器中，理论可塞 3 列（3×300 = 900），但加上 2 个 gap（≈32px）后，可用宽度只剩约 888px，Grid 就只能回退到 2 列。
解决办法有两种：
- 把
gap算进minmax()下限：minmax(calc(300px + 1rem), 1fr) - 用
max-content替代固定像素下限，避免硬编码
最易被忽略的是：父容器没设明确宽度（比如被 flex 默认的 flex-basis: auto 干扰）、子项用了 float 或没设 max-width: 100% 的图片——这些都会让 minmax() 中的 1fr 无法解析，整行退化为单列。调试时先加 outline: 1px solid red 看父容器真实尺寸。
