使用 repeat() 函数可简化 CSS Grid 中 grid-template-columns 的列定义，1. 创建 12 列等宽网格：repeat(12, 1fr)；2. 混合模式如 100px repeat(3, 1fr) 100px；3. 结合 minmax(200px, 1fr) 实现响应式布局；4. 区分 auto-fill（填充空白）与 auto-fit（拉伸内容列）；5. 支持命名轨道提升可维护性。
在使用 CSS Grid 布局时，grid-template-columns 是定义网格列的关键属性。当列数较多或具有规律性时，手动写每个列宽会显得冗长且难以维护。这时结合 repeat() 函数可以大幅简化代码，提升可读性和效率。
使用 repeat() 简化重复列宽
当你需要创建多个宽度相同的列时，无需逐个写出每个值。repeat() 函数允许你指定重复次数和每列的尺寸。
例如，创建一个 12 列等宽网格：grid-template-columns: repeat(12, 1fr);
这等同于写 12 次 1fr，但更简洁清晰。组合不同模式的重复结构
repeat() 不仅限于单一单位，还可以与其他列定义混合使用，适用于复杂布局。
立即学习“前端免费学习笔记（深入）”；
比如创建两侧固定、中间弹性重复列的布局：grid-template-columns: 100px repeat(3, 1fr) 100px;
表示：左100px + 3个等分弹性列 + 右100px，共5列。
使用 repeat() 配合 minmax() 实现响应式列
结合 minmax() 和 repeat() 可以轻松实现自适应网格，无需媒体查询。
例如，让每列最小 200px，最大 1fr：grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
浏览器会自动计算能容纳多少个至少 200px 的列，并均匀分配剩余空间。 auto-fill 与 auto-fit 的区别：- auto-fill：填满容器，即使末尾留空
- auto-fit：只生成有内容的列，并拉伸填充剩余空间
命名重复轨道以提高可维护性
你也可以在 repeat() 中使用带名称的轨道，便于后续定位网格区域。
示例：grid-template-columns: [start] repeat(4, [col] 1fr [gap]) [end];
这会生成带有命名线的结构，可用于精确控制网格项位置。基本上就这些。合理使用 repeat() 能让 grid-template-columns 更简洁、灵活，尤其在构建栅格系统或响应式布局时非常实用。掌握它之后，你会发现很多传统布局方法都可以被替代。不复杂但容易忽略。
