repeat() 是解决重复轨道定义痛点的原生方案，比手动书写更可靠、易维护、语义清晰，支持响应式与嵌套，需注意兼容性及调试验证。
直接说结论：repeat() 不是用来“省几行代码”的小技巧，而是解决「重复轨道定义」这个高频痛点的原生方案。不用它，grid-template-columns 和 grid-template-rows 很快就会变成一长串难以对齐、极易出错的手动书写。
写死列数时，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且子元素不足时，grid-auto-flow: row（默认）会让后续元素继续填下一行，而不是撑开当前行 —— 如果你期望“留空占位”，得配合grid-auto-rows - Safari 15.4 之前对
repeat(auto-fit, ...)在 flex 容器内嵌套 grid 有渲染 bug，遇到白屏先查 Safari 版本 -
repeat()本身不触发重排，但它的输出结果会影响grid-auto-columns/rows的隐式轨道生成逻辑 —— 调试时别只盯着显式定义
最常被跳过的动作：写完 repeat() 后，用浏览器开发者工具的 Grid 面板直接勾选“Overlay Grid”，看实际生成的轨道数是否符合预期 —— 文字描述再准，也不如一眼看见对错。
