repeat() 是 CSS Grid 中用于定义重复轨道的函数，配合 gap、border、background 等可高效实现等距分隔、虚线填充、响应式布局及斑马纹背景，本质是将空间节奏表达为可计算、可组合、可响应的布局逻辑。

repeat() 是 CSS Grid 布局中一个简洁但极具表现力的函数，常被用来替代冗余的列/行重复声明。它本身不直接“绘制”分隔符或填充，但配合 grid-template-columns、grid-gap（或 gap）、border、background 等属性，能以极少代码实现视觉上规律的分隔、留白、虚线感、斑马纹填充等 UI 逻辑。

用 repeat() + gap 实现等距分隔条

常见于卡片列表、标签栏、按钮组之间需要统一间距又不想额外加空元素或 margin 的场景：

• 写法示例：display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
• gap 自动在每项之间插入空白，相当于“隐形分隔符”，语义干净、响应友好
• 若需视觉强化分隔（如细线），可搭配 border-bottom 或 border-right 在子项上设置，并用 :last-child 移除末尾多余边框

用 repeat() + 精确 track-size 模拟虚线/点阵填充

比如设计一个背景为「· · ·」节奏的装饰性横条，或表单中提示用户可拖拽的区域：

• 写法示例：grid-template-columns: repeat(10, 8px 12px); background: linear-gradient(to right, #000 50%, transparent 50%); background-size: 20px 100%;
• 更轻量的做法：用 repeat(5, 20px 10px) 定义列宽模式，再对奇数列设 background: currentColor，偶数列透明 —— 实际渲染出点线交替效果
• 关键点：track 大小即视觉单元，无需伪元素或 SVG

用 repeat(auto-fit) + minmax() 动态填充+自动分隔

适配不同屏幕宽度的标签云、技能图标栏，既要紧凑排列，又要保持最小间距和尺寸：

• 写法示例：grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px;
• 浏览器自动计算最多能放几列，不足时拉伸剩余列，gap 始终维持分隔一致性
• 比 Flexbox 的 flex-wrap 更可控：不会因单个内容过长导致整行错位，且 gap 不受内容 margin 干扰

用 repeat() 配合 background-position 实现斑马纹填充

不需要 JS 或多个 div，仅靠 grid 结构+背景偏移就能做出带间隔的底纹效果：

• 写法示例：grid-template-columns: repeat(4, 100px); background: repeating-linear-gradient(90deg, #f0f0f0, #f0f0f0 50px, #fff 50px, #fff 100px); background-size: 200px 100%;
• 原理：repeat 划分结构网格，background-size 与列总宽对齐，让渐变周期严格匹配列组
• 适合做数据表格头、配置面板分区块背景，视觉清晰且无 DOM 膨胀

不复杂但容易忽略：repeat() 的真正威力不在“重复多少次”，而在于它把布局节奏变成了可计算、可组合、可响应的表达式。分隔与填充，本质是空间节奏问题 —— 把它交给 repeat() 和 gap，比手动算 margin、插空 div 或堆伪元素更接近 UI 的本意。