repeat()函数可简化css Grid中重复轨道的定义，语法为repeat(次数, 轨道大小)，支持固定值、fr单位、嵌套及auto-fill/auto-fit动态布局，提升代码可读性与响应式能力。
如果您在使用 CSS Grid 布局时需要定义多个重复的轨道，可以利用 repeat() 函数简化代码书写。该函数能够减少冗余声明，使网格结构更清晰易读。
本文运行环境：macBook Pro，macOS Sonoma
一、基本语法与结构
repeat() 函数用于在 grid-template-columns 或 grid-template-rows 中重复指定的轨道尺寸模式。它接收两个参数：重复次数和要重复的值。
1、语法格式为 repeat(重复次数, 轨道大小)，其中“重复次数”可以是正整数，“轨道大小”可以是长度单位、fr 单位或 auto 等。
立即学习“前端免费学习笔记（深入）”；
2、例如，repeat(3, 100px) 等同于手动书写 100px 100px 100px。
二、固定数量重复列或行
当需要创建具有相同宽度或高度的多个列或行时，repeat() 可以显著缩短代码长度。
1、设置四列等宽的网格容器：grid-template-columns: repeat(4, 200px); 表示生成四个每列宽 200px 的列。
2、同样适用于行方向：grid-template-rows: repeat(3, 50px); 创建三行，每行高 50px。
三、结合 fr 单位实现弹性布局
使用 fr（fraction）单位配合 repeat() 可以创建响应式且自适应剩余空间的网格结构。
1、grid-template-columns: repeat(5, 1fr); 将容器均分为五等份，每个列占据相等的可用空间。
2、也可混合不同比例：repeat(2, 2fr) 后接 repeat(3, 1fr)，表示前两列占双倍空间，后三列占单倍。
四、嵌套 repeat 函数定义复杂模式
repeat() 支持嵌套使用，可用于构建周期性变化的复杂网格轨道序列。
1、例如：repeat(2, 100px 50px) 会生成 100px、50px、100px、50px 四个轨道。
2、进一步可写成 grid-template-columns: repeat(3, repeat(2, 1fr 2fr));，即每组包含一个 1fr 和一个 2fr 列，并整体重复三次。
五、使用 auto-fill 与 auto-fit 动态填充
将 repeat() 与关键字 auto-fill 或 auto-fit 结合，可在容器尺寸变化时自动调整列数。
1、grid-template-columns: repeat(auto-fill, 100px); 表示尽可能多地填充宽度为 100px 的列，超出则换行。
2、repeat(auto-fit, minmax(100px, 1fr)) 在空间不足时会自动压缩或拉伸每一列，同时保持最小 100px 宽度。