repeat()可压缩重复轨道，如repeat(5, 1fr)替代1fr 1fr 1fr 1fr 1fr；auto-fill强制生成所有可能轨道并保留空列，auto-fit仅按内容生成轨道并均分剩余空间，卡片布局首选auto-fit。
直接用 repeat() 替代一长串重复的轨道值，就能把 grid-template-columns: 1fr 1fr 1fr 1fr 1fr 这种写法压缩成 grid-template-columns: repeat(5, 1fr) —— 不仅少打字，还杜绝手误漏写、多写空格等低级错误。
什么时候必须用 repeat() 而不是手写？
当轨道模式出现规律性重复时，手写就变成维护噩梦。比如产品列表要固定 4 列，但每列又需要 minmax(250px, 1fr)；或者仪表盘里一组 6 行高度全为 auto。
- 手写
grid-template-rows: auto auto auto auto auto auto容易数错、改错一两个就错位 -
repeat(6, auto)语义清晰，增减行数只需改一个数字 - 混合场景如
grid-template-columns: 80px repeat(3, 1fr) 120px，首尾固定 + 中间弹性，结构意图一目了然
repeat() 里填 auto-fill 和 auto-fit 的区别在哪？
两者都用于响应式列数计算，但行为完全不同：前者“宁可留空也不缩”，后者“有内容才占位”。实际效果差异极大，选错会导致布局塌陷或大量空白。
-
repeat(auto-fill, minmax(200px, 1fr))：容器宽 900px 时会强行生成 5 个轨道（900 ÷ 200 = 4.5 → 向上取整为 5），哪怕只放了 3 个卡片，剩下 2 个轨道仍占空间 -
repeat(auto-fit, minmax(200px, 1fr))：同样条件只生成 3 个轨道，剩余空间由这 3 个轨道均分，视觉更紧凑 - 绝大多数卡片类布局用
auto-fit更合理；只有需要对齐网格线（比如后台数据表格）才考虑auto-fill
嵌套和混合写法容易踩哪些坑？
repeat() 支持嵌套和与其他轨道值混用，但单位冲突、括号层级、浏览器兼容性这些细节不注意，CSS 就会静默失效。
- 不要在同一个
repeat()里混用单位，比如repeat(3, 100px 1fr)是合法的，但repeat(3, 100px 1em)可能触发渲染异常 —— 浏览器对混合绝对/相对单位的解析不一致 -
repeat(2, repeat(3, 1fr))等价于repeat(6, 1fr)，语法合法但无实际优势，反而增加理解成本，不推荐 - 旧版 Safari（auto-fit +
minmax()组合支持不稳定，上线前务必在真机验证
真正省力的关键不在“用了 repeat()”，而在判断清楚：该重复的是数量、模式，还是响应逻辑。写完记得检查浏览器 devtools 里生成的轨道数是否符合预期——有时候 CSS 没报错，但轨道被折叠或溢出了，问题就藏在这里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
