auto-fit小屏只显示一列是因为minmax()最小值被内容撑开，如图片未设max-width:100%、子项含flex:1触发min-width:auto，导致单格实际宽超设定下限，容器无法容纳第二列。
auto-fit 为什么小屏下只显示一列？
不是语法写错了，而是 minmax() 的最小值被内容撑开了。比如图片没设 max-width: 100%、子项用了 display: flex 且内部有 flex: 1（触发浏览器默认 min-width: auto），都会让单个网格项实际宽度远超你写的 minmax(280px, 1fr) 下限，导致容器放不下第二列。
常见修复方式：
- 给所有子项加
min-width: 0（尤其含flex或grid的嵌套） - 图片统一设
max-width: 100%; height: auto; - 文字块加
overflow: hidden; word-break: break-word;，避免white-space: nowrap强制拓宽轨道 - 检查父容器是否被上层
white-space: nowrap或未设width: 100%影响了真实宽度
auto-fill 为什么右侧总留白甚至横向滚动？
auto-fill 不看子元素数量，只按 minmax() 最小值和容器宽“硬算”最大列数。比如 repeat(auto-fill, minmax(280px, 1fr)) 在 900px 宽容器中会生成 3 列（900 ÷ 280 ≈ 3.2 → 3），即使只有 1 个卡片，剩下 2 条空轨道仍真实存在、参与 1fr 分配，还计入 gap 计算——结果就是内容被挤压，右侧留白，甚至触发横向滚动。
解决思路：
立即学习“前端免费学习笔记（深入）”；
- 确认是否真需要空轨道：仪表盘、日历格子等需结构稳定场景才用
auto-fill；卡片列表、相册等优先换auto-fit - 若必须用
auto-fill，把gap算进最小值，例如改用minmax(calc(280px + 1rem), 1fr)，再保留gap: 1rem - 禁用空轨道的视觉干扰：加
grid-auto-flow: dense可减少跨行空白，但不消除空轨道本身
列数在缩放时突然跳变，是 bug 吗？
不是 bug，是规范行为。列数由 容器宽 − (列数 − 1) × gap 再除以 minmax() 最小值得出，临界点非常敏感。比如 minmax(280px, 1fr) 搭配 gap: 1rem，当容器从 840px 缩到 839px，可用宽度少掉约 16px，839 − 16 = 823，823 ÷ 280 ≈ 2.94 → 向下取整为 2 列，于是立刻从 3 跳成 2。
调试关键：
- 打开 DevTools Grid 面板，勾选 “Show track sizes”，直接看列线数量变化，别信“看起来满了”
- 给父容器加
outline: 1px solid red确认真实宽度 - 动态内容（如搜索过滤、分页加载）下，
auto-fit的跳变更明显——这不是 CSS 问题，是布局逻辑必然结果
Safari 和 IE 兼容性怎么兜底？
auto-fit 在 Safari 16.3 及更早版本中，若写成 repeat(auto-fit, 1fr)（缺 minmax()）会静默退化为单列；IE 完全不支持 auto-fit，只认 auto-fill（且行为略有不同）。
不能依赖 JS 检测是否生效——它不报错，只回退。稳妥做法：
- 用
@supports (display: grid)包裹 Grid 规则，外层加float或inline-block降级布局 - 真要 JS 控制，监听
resize并比对element.clientWidth与预设列宽阈值，比查 CSS 支持更可靠 - 避免写
repeat(auto-fit, 1fr)这类无效语法，浏览器根本不识别
auto-fit 和 auto-fill 哪个单词拼得对，而是 minmax() 的“最小”会被内容顶开，而空轨道是否保留，取决于你有没有意识到它在 DOM 和渲染层面都是真实存在的。 
