repeat()是解决重复轨道定义痛点的原生方案，如repeat(5, 1fr)替代手写五次1fr，语义清晰、不易出错；结合auto-fit/minmax()可实现响应式卡片布局，嵌套如200px repeat(3, 1fr) 80px提升结构可维护性。
repeat() 不是用来“省几行代码”的小技巧，而是解决「重复轨道定义」这个高频痛点的原生方案。不用它，grid-template-columns 很快就会变成一长串难以对齐、极易出错的手动书写。
写死列数时，repeat(5, 1fr) 比手写五次 1fr 更可靠
当你明确知道要 5 列均分、或 4 行固定高 60px，手写容易漏空格、多逗号、单位不统一：grid-template-columns: 1fr 1fr 1fr 1fr 1fr;——看着就累，改数量得重数、重写grid-template-columns: repeat(5, 1fr);——语义清晰，改数量只动一个数字
混合单位也一样：repeat(2, 150px 1fr) 展开就是 150px 1fr 150px 1fr，错一位整个结构就偏了
注意：repeat() 的第二个参数是「轨道列表」，不是单个值；repeat(3, 1fr 2fr) 会生成 6 列（每组 2 列），不是 3 列
响应式卡片墙必须用 repeat(auto-fit, minmax())
手动写媒体查询适配不同屏幕列数，维护成本爆炸。而这一行就能替代整套断点逻辑：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
关键差异在 auto-fit 和 auto-fill：
• auto-fit：填满后自动拉伸非空项目，不留空白列 —— 多数卡片布局首选
• auto-fill：尽可能塞满所有可能轨道，哪怕对应位置没内容 —— 适合相册、固定栅格背景
如果卡片内容高度不一致，记得加 align-items: start，否则默认拉伸导致错位
复杂布局里嵌套 repeat() 比拼接字符串更易读
比如「左侧边栏 + 三列主区 + 右侧工具栏」这种经典结构，有人会这样写：grid-template-columns: 200px 1fr 1fr 1fr 80px
但一旦主区列数要动态调整（比如从 3 列变 4 列），就得重算位置、重改所有相关属性。换成嵌套写法：grid-template-columns: 200px repeat(3, 1fr) 80px
优势立刻体现：
• 结构意图明确：固定-弹性-固定
• 改列数只需调 repeat(4, 1fr)，不碰首尾
还能继续嵌套：repeat(2, 100px repeat(3, 1fr)) 表示两组「100px + 3列弹性」
别为了“看起来高级”强行嵌套三层 —— 超过两层嵌套时，不如拆成变量（CSS 自定义属性）或注释说明
容易被忽略的坑：浏览器兼容性与隐式网格行为
repeat() 在所有现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+）中完全支持，但要注意两个隐性行为：
• 当使用 auto-fit 或 auto-fill 且子元素不足时，auto-fit 会塌缩空轨道，auto-fill 会保留空轨道 —— 这直接影响 :nth-child() 选择器行为
• repeat(3, 1fr 200px) 看似想建三组「1fr + 200px」，实际生成 6 列交替宽度；Grid 不支持“复合列”语义，若需固定间距+弹性内容，应该用 gap 或嵌套容器，而不是强行塞进 repeat()
立即学习“前端免费学习笔记（深入）”；
