答案：repeat()函数可简化CSS Grid重复轨道定义，如repeat(3,1fr)创建三等分列，结合auto-fit与minmax可实现响应式网格布局。
在 CSS Grid 布局中，repeat() 函数是一个非常实用的工具，能帮助我们快速定义重复的列或行，避免手动重复书写相同的尺寸值。当你想用 grid-template-columns 自动生成多列时，repeat() 尤其高效。
基本语法
repeat() 的语法结构如下：
grid-template-columns: repeat(数量, 列宽);第一个参数是重复的次数，第二个是每列的宽度。例如：
grid-template-columns: repeat(3, 1fr);这会生成 3 列，每列平均分配容
器空间（即各占 1/3 宽度）。
灵活使用 repeat() 创建响应式布局
你可以结合 auto-fit、auto-fill 和 minmax() 实现自适应列数，让 Grid 自动换行并填充可用空间。
示例：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));含义是：尽可能多地放入最小 200px、最大 1fr 的列。当容器变窄时，列会自动换行并重新分布。
常见组合：
- repeat(auto-fill, minmax(150px, 1fr)) —— 即使没有内容也预留轨道
- repeat(auto-fit, minmax(100px, 1fr)) —— 有内容时才拉伸填充
混合使用固定与弹性列
你也可以在 repeat() 中与其他列尺寸混合使用。例如：
grid-template-columns: 100px repeat(2, 1fr) 200px;表示：第一列 100px，中间两列等分剩余空间，最后一列 200px。
实际应用场景
适合用于：
- 图片网格（如相册布局）
- 卡片列表（商品、文章摘要）
- 表单字段排布
比如做一个响应式卡片网格：
.container {display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
无论屏幕大小如何变化，每张卡片最小 250px，超出则自动换行，充分利用空间。
基本上就这些。掌握 repeat() 能极大简化 Grid 列的定义，让布局更简洁、更动态。不复杂但容易忽略细节，特别是 auto-fit 与 auto-fill 的区别。
