repeat()是CSS Grid中简化重复轨道定义的核心函数，支持指定次数、auto-fit/auto-fill响应式布局、嵌套及与CSS变量配合使用，但不直接支持计算表达式。
在 H5 的 CSS Grid 布局中，repeat() 函数是简化重复轨道定义的核心工具，能大幅减少冗余代码，提升可读性和维护性。
repeat() 的基本语法和作用
repeat() 用于声明重复的网格轨道（行或列），替代手动罗列多个相同值。它接收两个参数：重复次数（或关键词）和轨道大小（如 1fr、100px、auto 等）。
例如：
-
grid-template-columns: 1fr 1fr 1fr 1fr;→ 可简化为grid-template-columns: repeat(4, 1fr); -
grid-template-rows: 50px 50px 50px;→ 可简化为grid-template-rows: repeat(3, 50px);
用 auto-fit 和 auto-fill 实现响应式自适应列数
结合 repeat() 与 auto-fit 或 auto-fill，可让网格列数随容器宽度自动调整，无需媒体查询。
常用写法：
-
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))：浏览器尽可能多地放入最小 200px 宽的列，剩余空间均分；空列会被自动折叠（auto-fit会合并空白轨道） -
repeat(auto-fill, minmax(200px, 1fr))：同样逻辑，但保留所有可能轨道（包括空轨道），适合配合:empty或 JS 动态填充
这是构建卡片列表、图库等响应式布局最简洁的方式。
嵌套 repeat：定义复杂但规律的网格结构
repeat() 支持嵌套使用，适合处理多组重复模式。例如创建“标题+内容”交替的 2 列布局（每组含 1 行标题 + 1 行内容），共 6 组：
- 手动写：
grid-template-rows: auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr; - 用 repeat：
grid-template-rows: repeat(6, auto 1fr);
也支持混合写法，如：grid-template-columns: 80px repeat(3, 1fr) 80px; —— 左右固定侧边栏 + 中间 3 等分主区。
注意点：repeat 不接受变量或表达式，但可与 CSS 自定义属性配合
repeat() 本身不支持计算（如 repeat(var(--count), 1fr) 无效），但可通过 JS 动态设置 CSS 变量，再在 style 中引用，实现运行时控制列数。
例如：
- HTML：
<div class="grid" style="--cols: 5"> - CSS：
.grid { grid-template-columns: repeat(var(--cols), 1fr); }
注意：部分旧版浏览器不支持在 repeat() 中直接使用 var()，建议加降级方案或用 JS 生成完整 grid-template-columns 值。
