repeat() 是 css grid 的函数，用于简化重复轨道定义，如 repeat(4, 1fr) 等价于 1fr 1fr 1fr 1fr；支持 auto-fit/auto-fill 实现响应式布局，仅适用于 grid-template-columns 等 grid 属性。
HTML5 本身没有 repeat() 函数，真正支持 repeat() 的是 CSS Grid 布局中的 grid-template-columns 和 grid-template-rows 属性——它是 CSS 的函数，不是 HTML 或 JavaScript 的。
什么是 repeat()？
它是 CSS Grid 提供的便捷语法，用来避免手动重复写多个相同的轨道尺寸（比如 1fr 1fr 1fr 1fr），改用 repeat(4, 1fr) 表达相同含义。
repeat() 的基本用法
语法格式为：repeat(重复次数, 轨道尺寸)，支持以下常见写法：
-
repeat(3, 200px)→ 等价于200px 200px 200px -
repeat(4, 1fr)→ 等价于1fr 1fr 1fr 1fr -
repeat(2, 100px 200px)→ 等价于100px 200px 100px 200px（重复整个序列） -
repeat(auto-fit, minmax(250px, 1fr)))→ 响应式常用写法，自动填充可用空间
和 auto-fit 与 auto-fill 搭配的实用技巧
这两个关键字让 repeat() 更智能，适合响应式网格：
-
auto-fill：尽可能多地填入最小尺寸轨道，空轨道仍保留（即使没内容） -
auto-fit：行为类似auto-fill，但会把空轨道收缩为零，剩余轨道自动拉伸占满容器 - 典型响应式写法：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
注意事项
使用时需注意几点，避免布局异常：
-
repeat()只能用于grid-template-columns、grid-template-rows和grid-auto-columns等 CSS Grid 属性中 - 不能在内联样式里用 JS 字符串拼接时漏掉引号，例如：
style="grid-template-columns: repeat(3, 1fr)"（引号必须完整） - 部分旧版浏览器（如 IE）完全不支持
repeat()，需确认目标环境兼容性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
