repeat()不是函数而是语法糖，解析时直接展开为扁平轨道列表，嵌套如repeat(2, repeat(3, 1fr))因语法非法被静默丢弃整条声明；第一个参数不可用css变量；auto-fit/auto-fill必须与minmax()配合使用。
repeat() 为什么解析时直接报错并丢弃整条声明
因为 repeat() 不是函数，而是 CSS 规范定义的语法糖，浏览器在解析 grid-template-columns 或 grid-template-rows 时，会把 repeat(2, 1fr) 这类写法**一次性展开为 1fr 1fr**，不执行任何运行时计算。嵌套如 repeat(2, repeat(3, 1fr)) 在语法层面就非法——解析器根本不会尝试“先算内层”，而是直接判定括号结构错误，静默忽略整条声明。
常见嵌套误写及等效正确写法
你看到“网格没了”“内容堆成一列”，大概率是下面这些写法触发了静默失效：
-
repeat(2, repeat(3, 1fr))→ 必须扁平化为repeat(6, 1fr)或repeat(2, 1fr 1fr 1fr) -
repeat(2, repeat(3, minmax(200px, 1fr)))→ 改成repeat(6, minmax(200px, 1fr))或repeat(2, minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr)) -
repeat(2, 100px repeat(3, 1fr))→ 合法（这是 repeat 外部拼接，不是嵌套），等价于100px 1fr 1fr 1fr 100px 1fr 1fr 1fr
为什么不能用 CSS 变量控制 repeat 的数量
repeat() 第一个参数必须是字面量数字，var(--cols) 是字符串替换，不是数值求值。写成 repeat(var(--cols), 1fr) 浏览器直接跳过整条声明，Computed 面板里 grid-template-columns 显示为空。
- 安全用变量的地方只有：单位值（
gap: var(--gap)）、minmax()内部（minmax(var(--min), 1fr)） - 动态列数必须靠 JS：
el.style.gridTemplateColumns = `repeat(${n}, 1fr)`，其中n是从getComputedStyle读出并转成数字的值
auto-fit / auto-fill 和 repeat 搭配时最易忽略的细节
这两个关键字不是独立尺寸，必须和 minmax() 成对出现，否则行为不可控：
-
repeat(auto-fit, 200px)→ 无效，浏览器按最简逻辑渲染（常只出一列） -
repeat(auto-fit, minmax(250px, 1fr))→ 正确，小屏 1 列，大屏自动铺满，空列收缩为 0 - Safari 10.0 及更早版本不支持
auto-fit，只认auto-fill；两者视觉差异极大，别靠名字猜
真正容易被忽略的是：repeat 展开后，所有轨道定义必须扁平、单位一致、空格逗号严格合规——少一个空格，整行就白写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
