auto-fit不会单独拉伸“最后一列”，而是将所有有内容的列均设为1fr并等宽填满容器；空轨道被丢弃，不等宽常因子项min-width: auto或未约束图片/文本导致。
auto-fit 本身不会拉伸“最后一列”，而是拉伸“所有有内容的列”
这是最常见的误解。auto-fit 的行为不是针对“最后一列”做特殊处理，而是把所有生成的轨道（即所有列）统一设为 1fr —— 前提是这些轨道里有子元素。空轨道会被直接丢弃，剩下的轨道均分容器剩余宽度。所以你看到的“最后一列变宽”，其实是整行所有列都等宽了，只是视觉上容易误判为“最后一列被单独拉伸”。
真正导致不等宽的常见原因：子项自身宽度干扰了轨道计算
当某列看起来比其他列宽，大概率不是 auto-fit 拉伸了它，而是该子项内容撑开了所在轨道。浏览器默认给每个 grid item 设置 min-width: auto（即 min-content），一个没约束的长 URL、图片未设 max-width: 100%、或内部用了 display: flex 都会让它拒绝收缩。
- 必须在子项上显式写
min-width: 0，仅写在容器上无效 - 图片加
max-width: 100%; height: auto; - 含文本的子项加
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;（注意：这四者缺一不可） - 避免在子项上写死
width、flex-basis或min-width过大值
gap 没预留空间时，“最后一列”可能根本就不存在
gap 会从容器总宽中扣除，但 minmax() 的最小值只管单列宽度，不自动包含 gap。例如容器宽 800px，gap: 1rem（≈16px），minmax(280px, 1fr)：可用宽度是 800 − (列数−1) × 16。算到临界点（比如刚好够 3 列但差 1px），auto-fit 会退回到 2 列——此时你看到的“最后一列变宽”，其实是只剩 2 列后它们各自占了 50% 宽度。
验证方法：在 DevTools 中临时删掉 gap，看列数是否恢复预期；若恢复，说明是 gap 和 minmax 下限没对齐。
为什么改用 minmax(0, 1fr) 后反而更稳？
1fr 本身没有收缩下限，遇到长内容仍会被撑开；而 minmax(0, 1fr) 显式告诉 Grid：“这列可以缩到 0”，从而激活真正的弹性压缩逻辑。它让 overflow 和 text-overflow 有机会生效，也避免因单个子项过宽导致整行列数骤降。
注意：minmax(0, 1fr) 在 Chrome 57+、Firefox 52+、Safari 10.1+ 可用，IE 完全不支持；若需兼容旧 Safari（如 10.0），要加 @supports 检测或降级为 Flex 布局。
min-width: 0 和图片的 max-width 约束——这两处漏掉，再怎么调 auto-fit 参数都白搭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
