repeat() 是 CSS Grid 的函数式语法，用于 grid-template-columns/rows 中定义重复轨道，需配合 display: grid 使用，常见形式有 repeat(4,200px)、repeat(3,1fr 2fr)、repeat(auto-fit,minmax(200px,1fr))，误用主因是缺失网格上下文或错用于子项属性。
repeat() 不是 JavaScript 函数，而是 CSS Grid 中的 函数式语法，专用于 grid-template-columns 和 grid-template-rows 等属性中快速定义重复轨道。直接在 HTML 里写 repeat() 无效，必须通过 style 属性或 CSS 文件应用到元素上。
如何在内联样式中用 repeat() 定义列
最直接的方式是给容器元素加 style 属性，配合 display: grid：
div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>
注意：HTML 元素本身不解析 repeat()；它只是把字符串传给浏览器的 CSS 引擎。所以必须确保同时设置 display: grid，否则 grid-template-columns 会被忽略。
repeat() 的三种常用参数形式
它的语法是 repeat(<count>, <track-size>)，但 <count> 和 <track-size> 都有灵活写法：
立即学习“前端免费学习笔记（深入）”；
-
repeat(4, 200px)：固定 4 列，每列 200px -
repeat(3, 1fr 2fr)：生成 6 列，按1fr 2fr 1fr 2fr 1fr 2fr循环 -
repeat(auto-fit, minmax(200px, 1fr)))：响应式列数，最小列宽 200px，自动填满容器
其中 auto-fit 和 auto-fill 容易混淆：auto-fit 会合并空轨道，auto-fill 保留所有（即使为空），实际布局效果差异明显。
常见错误：为什么写了 repeat() 却没生效
多数失效不是语法错，而是上下文缺失或误解：
- 忘记设置
display: grid或display: inline-grid - 把
repeat()写在非网格容器上（比如普通div没设 display） - 在
grid-column或grid-area这类子项属性里误用repeat()（它只用于定义网格线，不用于定位） - 用百分比值如
repeat(3, 33.33%)导致因四舍五入和 gap 叠加而溢出容器
调试时可打开浏览器开发者工具，检查该元素的 computed 样式中 grid-template-columns 是否被解析为具体数值 —— 如果显示为 invalid value 或空白，基本就是上述某条出了问题。
真正要小心的是 minmax() 和 auto-fit 的组合行为：它依赖容器宽度实时计算列数，但若父容器没有明确宽度（比如 width: auto 且无约束），结果可能不稳定。这种动态性没法靠 HTML 结构控制，得靠外层 CSS 或 JS 配合。
