repeat()函数可简化CSS网格布局中的重复轨道定义，语法为repeat(次数, 尺寸)；例如repeat(12, 1fr)创建12等宽列，比手动书写更简洁；常用于等分布局、响应式卡片（如repeat(auto-fit, minmax(250px,1fr))）、交替模式（如repeat(3, 200px 100px)）及与auto-fill/auto-fit结合实现自适应布局；还可组合固定列与弹性列，如grid-template-columns: 200px repeat(3,1fr)，或嵌套使用提升可读性，大幅减少代码量并增强维护性。
在定义CSS网格布局时，如果需要创建多个结构相同的列或行，手动写每个尺寸会很繁琐。这时可以用 repeat() 函数来简化代码，让网格定义更清晰、更易维护。
什么是 repeat() 函数
repeat() 是CSS Grid中用于重复定义相同轨道（列或行）的函数。它接受两个参数：重复的次数和要重复的值。
语法：repeat(重复次数, 轨道尺寸)
例如，创建12列等宽网格可以这样写：
立即学习“前端免费学习笔记（深入）”；
grid-template-columns: repeat(12, 1fr);
这比写12个 1fr 简洁得多。
常用使用场景
实际开发中，repeat() 可以应对多种常见布局需求：
-
等分列布局：如三栏均分布局：
grid-template-columns: repeat(3, 1fr); -
带间隙的重复列：配合
minmax()创建响应式卡片布局：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); -
交替大小的轨道：重复一组模式，比如“大-小-大”：
grid-template-columns: repeat(3, 200px 100px);生成6列
结合关键字提升灵活性
repeat() 支持与自动填充（auto-fill）和自动拟合（auto-fit）结合，实现响应式网格：
-
auto-fill：尽可能多地填满容器，空位保留
repeat(auto-fill, minmax(150px, 1fr)) -
auto-fit：填满后自动拉伸项目占满空间
repeat(auto-fit, minmax(150px, 1fr))
这种方式无需媒体查询就能适应不同屏幕尺寸。
简化复杂网格定义
对于包含固定边栏和弹性主区域的布局，也可以组合使用 repeat()：
grid-template-columns: 200px repeat(3, 1fr);
表示第一列固定200px，后面紧跟3个等分的弹性列。
甚至可以嵌套使用，提高可读性：
grid-template-rows: repeat(2, 50px 10px) 100px; 定义4行（50px + 10px）再加一行100px。
基本上就这些。合理使用 repeat() 能大幅减少重复代码，让网格布局更直观、更易调整。不复杂但容易忽略。
