repeat() 是 css grid 的语法糖，需配合 display: grid 使用，基本写法为 repeat(次数, 轨道尺寸)，支持 auto-fit/auto-fill 与 minmax() 实现响应式布局，禁用嵌套 repeat 或非网格上下文。
直接用 repeat() 替代一长串重复的尺寸值，就能让 grid-template-columns 或 grid-template-rows 变得简洁、可读、易维护。它不是 JavaScript 函数，也不是 HTML 属性，而是 CSS Grid 的语法糖，必须配合 display: grid 才生效。
repeat() 的基本写法和实际效果
语法是 repeat(次数, 轨道尺寸)，浏览器会严格按你写的次数展开轨道：
-
repeat(4, 200px)→ 生成 4 列，每列固定宽 200px -
repeat(2, 1fr 2fr)→ 先定义“1fr 2fr”为一组，再重复 2 次，最终是 4 列：1fr、2fr、1fr、2fr -
repeat(3, 1fr) 200px→ 前 3 列等分剩余空间，最后一列固定 200px（混合写法合法）
响应式列数：auto-fit 和 auto-fill 的区别
两者都必须搭配 minmax() 使用，单独写 repeat(auto-fit, 1fr) 无效：
-
repeat(auto-fit, minmax(250px, 1fr)))：优先按最小宽度铺满，空轨道会被合并，已渲染的列自动拉伸占满整行 -
repeat(auto-fill, minmax(250px, 1fr)))：同样铺满，但保留所有可能的轨道槽位，哪怕没内容也占位（可能看到空白列） - 卡片列表、图片画廊推荐用 auto-fit；表单固定格子或对齐模板建议用 auto-fill
常见失效原因和排查方法
写了 repeat 却没效果，大概率不是语法错，而是上下文问题：
- 忘记设置
display: grid或display: inline-grid—— 没网格容器，repeat 就被忽略 - 把 repeat 写在子元素上，比如
grid-column: repeat(3, 1fr)—— 它只用于定义轨道，不能用于定位 - 用百分比如
repeat(3, 33.33%)+ gap → 四舍五入叠加后容易溢出容器 - 打开开发者工具，看 computed 样式里
grid-template-columns是否解析成具体数值；若为空或显示 invalid value，就说明上面某条出错了
别踩坑：这些写法不支持
规范明确禁止某些看似合理的组合：
- ❌
repeat(2, repeat(3, 1fr))—— 嵌套 repeat 语法错误，浏览器直接报 invalid property value - ❌
repeat(3, 1fr auto)—— auto 在 repeat 内部失去约束，易导致内容撑开或错位 - ❌ 把 repeat 用在非 grid 容器上（比如普通 div 没设 display），或只设了 grid-column-gap 却漏掉 display
- ✅ 正确做法：静态数量就手动算总数，如“4 组 × 3 列” →
repeat(12, 1fr)；需要逻辑分组可用命名线或 span 控制
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
