auto-fill 会预留所有可能列位（含空列），auto-fit 则收缩空列使剩余列占满容器；响应式卡片列表应优先用 auto-fit，避免右侧留白和视觉跳变。
grid-template-columns: repeat(auto-fill, minmax(...)) 为什么列数不固定
因为 auto-fill 不是“填满就停”，而是“尽可能多地尝试放置可容纳的列”——哪怕最后一列空着，它也会保留位置。浏览器先按 minmax() 的最小值（比如 200px）算最多能塞几列，再用实际内容撑开（到最大值），空余空间均分给所有列。
常见错误现象：grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))) 在宽度为 700px 的容器里生成了 3 列（250+250+200），但第三列只显示一半内容，或者看起来“被压缩”了。
- 真正起约束作用的是
minmax()的第一个参数（最小列宽），不是你期望的“刚好放得下几列” -
1fr在minmax()里表示“剩余空间均分”，但前提是列数已由auto-fill决定；它不会反过来倒推列数 - 如果容器宽度不能被最小列宽整除，
auto-fill仍会多占一列空白位（视觉上像右边留白）
auto-fill 和 auto-fit 的行为差异在哪
auto-fill 会保留所有可能列的位置，包括空列；auto-fit 会把空列“收掉”，让剩余列占据全部宽度。这是最常被忽略的切换点。
使用场景：做响应式卡片列表时，想让卡片始终铺满整行且不留右侧空隙，必须用 auto-fit；只有当你需要“预留槽位等后续 JS 动态插入”时，才考虑 auto-fill。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
repeat(auto-fill, minmax(300px, 1fr)))→ 可能出现看不见的空白列，影响对齐和 hover 效果 - 正确写法：
repeat(auto-fit, minmax(300px, 1fr)))→ 实际渲染列数随容器缩放实时调整，无冗余空白 - 兼容性无差别，两者在所有支持
grid的浏览器中行为一致
minmax() 里写 1fr 会导致列宽突变
当 minmax(200px, 1fr) 遇到多列时，“1fr” 指的是“当前行剩余空间的均分份额”，不是“固定宽度”。所以列数变化时，每列宽度会跳变，尤其在小屏幕断点附近明显。
性能影响不大，但视觉体验差：用户拖拽窗口时，卡片可能突然从 3 列跳成 2 列，中间没有过渡。
- 避免在
minmax()最大值位置直接写1fr，除非你明确需要“弹性挤压” - 更稳的写法是
minmax(200px, 1fr)→ 改为minmax(200px, max-content)或固定值如minmax(200px, 400px) - 若真要弹性，建议用
minmax(200px, 1fr)+grid-auto-flow: column控制流向，而非依赖行内均分
container query 配合 auto-fill 时的宽度陷阱
在容器查询（@container）中用 auto-fill，容易误以为“容器宽度变了，列数立刻重算”，其实不是——CSS Grid 的列数计算发生在布局阶段，而容器查询的尺寸感知有延迟，可能导致初始渲染错乱。
典型表现：父容器设了 container-type: inline-size，子元素用 repeat(auto-fill, minmax(250px, 1fr)))，但首次加载时只显示 1 列，直到 resize 才恢复。
- 根本原因：容器查询生效前，Grid 已按默认尺寸（通常是 0 或继承值）完成了一次列数推导
- 临时解法：给父容器加
container-name: grid-wrap，并在子元素grid-template-columns中显式引用该名称（部分新浏览器支持） - 更可靠做法：放弃纯 CSS 方案，用
ResizeObserver监听容器宽度，JS 触发 class 切换控制列数
复杂点在于，auto-fill 看似自动，实则高度依赖上下文尺寸的确定时机；一旦尺寸来源变成动态容器，就得主动管理它的生命周期。
