如何用CSS Grid的repeat()减少重复样式

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。

1. 手写 grid-template-rows: auto auto auto auto auto auto 容易数错、改错一两个就错位
2. repeat(6, auto) 语义清晰，增减行数只需改一个数字
3. 混合场景如 grid-template-columns: 80px repeat(3, 1fr) 120px，首尾固定 + 中间弹性，结构意图一目了然

repeat() 里填 auto-fill 和 auto-fit 的区别在哪？

两者都用于响应式列数计算，但行为完全不同：前者“宁可留空也不缩”，后者“有内容才占位”。实际效果差异极大，选错会导致布局塌陷或大量空白。

1. repeat(auto-fill, minmax(200px, 1fr))：容器宽 900px 时会强行生成 5 个轨道（900 ÷ 200 = 4.5 → 向上取整为 5），哪怕只放了 3 个卡片，剩下 2 个轨道仍占空间
2. repeat(auto-fit, minmax(200px, 1fr))：同样条件只生成 3 个轨道，剩余空间由这 3 个轨道均分，视觉更紧凑
3. 绝大多数卡片类布局用 auto-fit 更合理；只有需要对齐网格线（比如后台数据表格）才考虑 auto-fill

嵌套和混合写法容易踩哪些坑？

repeat() 支持嵌套和与其他轨道值混用，但单位冲突、括号层级、浏览器兼容性这些细节不注意，CSS 就会静默失效。

1. 不要在同一个 repeat() 里混用单位，比如 repeat(3, 100px 1fr) 是合法的，但 repeat(3, 100px 1em) 可能触发渲染异常 —— 浏览器对混合绝对/相对单位的解析不一致
2. repeat(2, repeat(3, 1fr)) 等价于 repeat(6, 1fr)，语法合法但无实际优势，反而增加理解成本，不推荐
3. 旧版 Safari（auto-fit + minmax() 组合支持不稳定，上线前务必在真机验证

真正省力的关键不在“用了 repeat()”，而在判断清楚：该重复的是数量、模式，还是响应逻辑。写完记得检查浏览器 devtools 里生成的轨道数是否符合预期——有时候 CSS 没报错，但轨道被折叠或溢出了，问题就藏在这里。