答案：repeat()函数通过指定重复次数和轨道尺寸简化CSS Grid布局。例如，grid-template-columns: repeat(4, 1fr)创建四列等分容器，等同于手动书写四个1fr；支持固定值如repeat(5, 100px)、弹性单位repeat(3, 1fr)及混合模式repeat(2, 100px 1fr)，还可结合auto-fill或auto-fit与minmax()实现响应式网格，如repeat(auto-fill, minmax(150px, 1fr))自动填充最小150px的列；同样适用于行定义，如repeat(6, 50px)创建六行，或repeat(4, minmax(60px, auto))设置自适应行高；合理使用可显著减少冗余代码，提升布局清晰度与维护性。
在CSS Grid布局中，repeat() 函数是一个非常实用的工具，用来简化重复的列或行轨道定义。它能减少冗余代码，让网格结构更清晰易读。
repeat() 函数的基本语法
repeat() 接收两个参数：重复的次数和要重复的值。语法如下：
repeat(重复次数, 轨道尺寸)例如，定义一个包含4列、每列宽1fr的网格：
grid-template-columns: repeat(4, 1fr);等同于手动写：
grid-template-columns: 1fr 1fr 1fr 1fr;重复固定与弹性尺寸
你可以用 repeat() 定义固定宽度、弹性单位（fr）、或混合模式。
- 固定尺寸示例：5列，每列100px grid-template-columns: repeat(5, 100px);
- 弹性比例示例：3等分容器 grid-template-columns: repeat(3, 1fr);
- 混合使用：交替 100px 和 1fr grid-template-columns: repeat(2, 100px 1fr); /* 等同于 100px 1fr 100px 1fr */
结合 auto-fill 与 auto-fit
搭配 repeat() 和 auto-fill 或 auto-fit，可以创建响应式网格，无需媒体查询。
- 自动填充可用空间（最小150px，最大1fr） grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
- 自动适配内容，挤掉空轨道 grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
这种方式适合卡片布局或图库，容器会根据屏幕大小自动调整列数。
在行（rows）中同样适用
除了列，你也可以用 repeat() 定义行高，尤其在多行均匀分布时特别方便。
grid-template-rows: repeat(6, 50px);这将创建6行，每行高度为50px。配合 minmax() 可实现自适应行高：
grid-template-rows: repeat(4, minmax(60px, auto));基本上就这些。合理使用 repeat() 能大幅简化Grid布局代码，提升可维护性，特别是在处理规律性结构时非常高效。
