auto-fit更适用于响应式网格，因空列收缩为0；auto-fill则预留空白列。正确写法是repeat(auto-fill, minmax(200px, 1fr)))，需配合子项min-width: 0等约束防溢出。
grid-template-columns用auto-fill还是auto-fit
关键区别不在“填满”本身，而在于剩余空间如何分配。用 auto-fill 时，即使没有足够子项，也会按轨道定义预留空白列；auto-fit 则会把空列的尺寸收缩为0（前提是轨道大小用 minmax() 定义）。多数响应式网格场景该选 auto-fit，除非你明确需要占位留白。
常见错误是写成 grid-template-columns: repeat(auto-fill, 200px)——这不会自动换行，也不会响应缩放，纯属固定列宽重复，失去“不确定数量”的意义。
- 正确起点是
repeat(auto-fill, minmax(200px, 1fr)) -
minmax(200px, 1fr)表示：每列至少200px，有富余空间就均分 - 容器必须有明确宽度（比如
width: 100%或设为 flex item），否则1fr无参照
子项内容撑开网格导致换行错乱
当子项内部有长文本、图片或设置了 white-space: nowrap，它可能拒绝收缩，导致网格强行多出一行，甚至溢出容器。这不是 auto-fill 的问题，而是子项未遵守网格的弹性约束。
典型表现：窗口缩小时，本该并排的3列变成2列+1列独占一行，且最后一列右侧留白巨大。
立即学习“前端免费学习笔记（深入）”；
- 给子项加
min-width: 0（重置 flex/grid 默认的min-width: auto） - 对文字内容加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap（按需） - 避免在子项上设固定
width或flex-basis，尤其不要和1fr混用
IE11不支持auto-fill怎么办
IE11完全不识别 auto-fill 和 auto-fit，直接忽略整条 grid-template-columns 声明，退化为单列流式布局。没有 polyfill 能真正模拟其行为。
若必须兼容 IE11，只能放弃 CSS Grid 的自动列生成逻辑，改用 display: flex + flex-wrap: wrap，再配合 JS 动态计算最大列数（如根据容器宽度除以最小项宽取整），或用媒体查询硬编码断点。
- 检测方式：
@supports (grid-template-columns: repeat(auto-fill, 1fr))) { ... } - 注意：IE11 识别
repeat(3, 1fr)，但不识别repeat(auto-fill, ...) - 别试图用
grid-auto-columns+grid-auto-flow: column曲线救国——IE11 对这两者的支持也不可靠
gap在auto-fill网格里被重复计算吗
不会。gap（或 row-gap/column-gap）只作用于真实存在的轨道间隙，不是按“最大可能列数”预设的。哪怕你写了 repeat(auto-fill, minmax(200px, 1fr))) 并只放了2个子项，也只在它们之间产生1个 gap，不会因为“能塞下5列”就预留4个空隙。
容易混淆的点：当子项数量少到只占1列时，gap 不会出现（因为没有相邻列）；但若用了 grid-auto-flow: dense 配合跨行/跨列，gap 的位置可能不符合直觉。
-
gap是渲染时计算的，不是声明时分配的 - 测试方法：用浏览器 devtools 查看 computed styles 中的
grid-column-gap值，它始终反映实际生效的像素值 - 如果发现 gap “消失”，大概率是子项被隐式跨列（比如某子项没设
grid-column却因内容过长触发了自动跨列）
auto-fill 语法，而是子项自身对 minmax() 下限的破坏——比如一个 img 默认不收缩，或者一个 div 里嵌了 display: table。这时候网格规则还在，但子项已经悄悄越狱了。 
