auto-fill 不优化性能反而增加渲染开销，auto-fit 才是响应式卡片的正确选择；前者生成所有理论轨道（含空轨道），参与 layout 计算并可能引发 overflow 和重排，后者自动收缩空轨道、仅让有内容轨道均分空间，且需配合正确的 minmax()（如 minmax(250px, 1fr)）和卡片内部弹性样式。
auto-fill 本身不优化加载性能，反而可能因预占轨道导致渲染开销增加；真正该用的是 auto-fit。
为什么 auto-fill 在 Grid 中常被误认为“能提升性能”
很多人看到 repeat(auto-fill, minmax(280px, 1fr)) 能自动算出最大列数，就以为它“更智能”“更高效”。其实它只是粗暴按最小宽度除容器宽，生成所有理论轨道——哪怕只放 1 个卡片，也会创建 4 条空轨道。这些空轨道仍参与 layout 计算、gap 分配、甚至触发重排，对性能无益。
常见错误现象：grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 在手机上显示右侧大片空白或横向滚动条，DevTools 里看到 grid-column-end: 5 却只有 2 个子项渲染——这不是卡顿，是多余的轨道在拖慢渲染。
- auto-fill 不跳过空轨道，浏览器必须为每条轨道保留布局上下文
- 空轨道仍响应
gap，导致总占用宽度虚高，小屏下更容易触发 overflow-x - 和
grid-auto-flow: column混用时，内容填充顺序错乱，调试成本陡增
auto-fit 才是响应式卡片的性能友好写法
auto-fit 会先生成同 auto-fill 一样多的轨道，但紧接着把所有空轨道尺寸设为 0，再让有内容的轨道用 1fr 均分剩余空间。整个过程由浏览器原生优化，无需 JS，也不增加 layout 节点数。
实操建议：
- 直接替换：把
auto-fill改成auto-fit，其他不动，就能消除空轨道开销 - 子项必须保持自然流式：不要写
width、float、position: absolute，否则 Grid 无法正确回收空轨道 - 搭配
gap: 1.25rem（约 20px）起步，避免窄屏下因 gap 过大导致列数意外减少
minmax() 写错会让 auto-fit 失效
minmax() 的第二个参数不是“最大宽度”，而是“单轨道可取的最大份额”。写错就会退化为 max-content，Grid 失去弹性约束，auto-fit 也救不回来。
典型错误：
- ❌
minmax(250px, 2fr)——fr单位不能用于 max 位置，浏览器静默降级 - ❌
minmax(250px, auto)——auto不是合法值，等价于没写 max - ✅ 正确只用
minmax(250px, 1fr)或minmax(250px, max-content)
最小值也别设太小（如 150px），中等屏可能多出一列，卡片内容被压缩，文字折行反而增加重绘压力。
真正影响加载性能的关键不在 repeat，而在卡片内部
repeat() 和 auto-fit 只控制外层轨道，卡片自身的样式才是性能瓶颈点。
容易踩的坑：
- 给卡片写死
width: 300px或height: 400px：强制脱离 Grid 弹性逻辑，导致错位、溢出甚至触发额外 scroll layout - 图片没加
max-width: 100%和height: auto：拉伸变形 + 强制重排 - 用
margin替代gap：边缘多出半倍间距，还得靠负 margin 或 nth-child 修正，增加 CSS 计算量
最简健壮写法：卡片自身不设宽高，仅用 max-width: 100% 防撑破，图片统一 img { display: block; max-width: 100%; height: auto; }。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
