grid-template 与 repeat() 结合可高效定义网格布局。通过 repeat(数量, 值) 简化重复轨道定义，如 grid-template-columns: repeat(12, 1fr) 创建 12 等宽列；结合 minmax() 与 auto-fit/auto-fill 实现响应式布局，如 repeat(auto-fit, minmax(200px, 1fr)) 自适应列数；支持混合模式构建复杂结构，如 80px 80px repeat(3, 1fr) 60px 定义固定与弹性列组合；可用于行高设置，如 repeat(6, auto) 创建自适应行；简写形式 grid-template: auto / repeat(4, 1fr) 等价于单独定义行列，提升代码简洁性与可维护性。
CSS 中的 grid-template 与 repeat() 函数结合使用，能极大简化网格布局的定义过程。通过 grid-template-rows、grid-template-columns 或简写的 grid-template 配合 repeat()，可以高效创建重复结构的网格，比如等宽列、响应式布局或复杂交错的行高。
基本语法与作用
repeat() 函数用于生成重复的值，常用于 grid-template-columns 和 grid-template-rows 中。其语法为：
例如，创建 12 列等宽网格：
grid-template-columns: repeat(12, 1fr);这比手动写 12 次 1fr 更简洁清晰。
立即学习“前端免费学习笔记（深入）”；
灵活使用 repeat 创建响应式布局
结合 minmax() 和 auto-fit/auto-fill，repeat() 可实现自适应列数：
这表示：根据容器宽度自动填充列，每列最小 200px，最大占据可用空间（1fr），浏览器自动计算可容纳多少列。
常见应用场景包括卡片布局、图库、产品列表等，无需媒体查询即可实现响应式效果。
组合多种模式定义复杂网格
repeat() 可与其他轨道尺寸混合使用。例如，一个布局前两列固定宽度，中间重复 3 列弹性列，最后加一列固定宽度：
这种写法清晰表达了结构意图，适合构建仪表盘、表单排版等复杂界面。
也可用于行定义：
grid-template-rows: repeat(6, auto);表示创建 6 行，每行高度由内容决定。
简写形式 grid-template 的应用
使用 grid-template 简写属性，可同时定义行、列和区域（较少用）。虽然不能直接在简写中嵌套 repeat() 用于行列混合，但可用于列部分：
等价于：
grid-template-rows: auto;grid-template-columns: repeat(4, 1fr);
适用于快速设置单行多列的均分布局。
基本上就这些。掌握 grid-template 与 repeat() 的搭配，能让网格布局更简洁、易维护，尤其在面对重复结构时优势明显。
