响应式卡片布局应优先使用 auto-fit，它只生成有内容的列轨道并均分剩余空间，避免小屏下空列或横向滚动；auto-fill 仅适用于需预留空白格子的场景，如日历或固定网格模板。
响应式卡片布局该用 auto-fit 还是 auto-fill
90% 的卡片列表、产品网格、仪表盘卡片区，应该用 auto-fit，不是 auto-fill。它会让有内容的列自动拉伸填满容器，避免小屏下出现看不见的空列或意外横向滚动。
常见错误现象：写了 repeat(auto-fill, minmax(250px, 1fr))，但只有 2 张卡片时右侧大片留白，甚至触发 overflow-x: scroll；调试时发现 computed width 明显小于容器宽度，却只渲染一列——大概率就是误用了 auto-fill。
-
auto-fit：只生成有子元素的列轨道，并把剩余空间均分给它们 -
auto-fill：按最小宽度尽可能多“预占位”，哪怕后面全是空轨道 - 二者语法完全一样，行为差异只在“是否保留空轨道”这一条
什么时候必须用 auto-fill
只有明确需要“预留空白格子”的场景才选 auto-fill，比如日历网格、固定 4×4 的仪表盘模板、带 hover 效果的空白卡片占位区。
典型表现：内容少时，网格结构依然稳定不跳动；DOM 中列轨道数固定，只是部分没渲染内容；你希望用户能“看到空白位置，知道那里可以加东西”。
立即学习“前端免费学习笔记（深入）”；
- 写法仍是
repeat(auto-fill, minmax(250px, 1fr))，但目的不是自适应，而是占位 - 若搭配
grid-auto-flow: column，注意可能溢出容器，需手动加overflow-x: hidden - IE 只支持
auto-fill（且行为与现代浏览器略有出入），但不支持auto-fit
minmax() 写错，auto-fit 就失效
auto-fit 不是魔法，它依赖 minmax() 提供的弹性区间来计算列数。写错参数，它就退化成单列或撑破布局。
- 别写
minmax(100px, 1fr)：小屏下会挤出超窄列，文字折行混乱，卡片高度塌陷 - 别写
minmax(250px, 250px)：锁死列宽，auto-fit失去“拉伸”能力，变成固定列宽布局 - 推荐起点：
minmax(280px, 1fr)——280px 是卡片可读最小宽度，1fr表示“均分剩余空间”，不是“填满” -
gap算进容器总宽，但不参与minmax()计算；如果gap总和过大（比如 6 列 × 24px），可能让实际可用宽度不够，导致列数比预期少一列
子元素不收敛，再好的 grid-template-columns 也没用
写了 repeat(auto-fit, minmax(280px, 1fr)) 却只显示一列？问题几乎一定出在子项上——它们没主动“收住宽度”，把轨道硬撑开了。
- 图片没设
max-width: 100%和height: auto，直接撑破列宽 - 子项用了
display: flex，内部flex: 1触发浏览器默认min-width: auto，得显式加min-width: 0 - 文字块含
white-space: nowrap或未设overflow: hidden，强制轨道拓宽 - 父容器被上层
white-space: nowrap或未设width: 100%影响，导致 grid 容器本身宽度异常
调试时先给父容器加 outline: 1px solid red 看真实宽度，再检查每列的 computed width 是否符合 minmax() 区间——别信“看起来满了”。
