css规范禁止repeat()第二参数嵌套calc()等函数，仅允许minmax()、fit-content()、max-content、min-content及轨道尺寸；auto-fit/fill必须搭配minmax()使用，变量不可用于repeat首参。
因为 CSS 规范明确禁止 repeat() 的第二个参数中嵌套除 minmax()、fit-content()、max-content、min-content 和轨道尺寸关键字（如 1fr、auto）之外的任何函数——而 minmax() 本身已经是一个合法值，不是“可嵌套”的容器；你写的 repeat(3, minmax(100px, 1fr)) 并非嵌套，而是正确用法；真正非法的是 repeat(2, calc(100px + var(--gap))) 这类写法。
repeat() 的第二个参数只接受特定轨道尺寸表达式
很多人误以为 minmax() 是“可以往里再塞东西”的函数，其实它在 repeat() 中只是一个原子级的轨道定义单元。规范只允许以下类型直接作为 repeat() 的第二个参数：
-
minmax(100px, 1fr)✅ 合法：这是标准推荐写法 -
fit-content(200px)✅ 合法 -
max-content✅ 合法 -
1fr、auto、200px✅ 合法 -
calc(200px + 1rem)❌ 非法：浏览器静默丢弃整条grid-template-columns声明 -
repeat(2, 1fr)❌ 非法：repeat() 不支持嵌套调用
错误常出现在复制粘贴时多加了一层括号，比如把 minmax(100px, 1fr) 错写成 minmax(minmax(100px, 1fr), 1fr) —— 这不是嵌套 repeat，而是嵌套 minmax，同样不被支持。
为什么 calc() 和 CSS 变量不能进 repeat() 第二个参数
根本原因在于 CSS 解析器在语法分析阶段就拒绝非字面量表达式。repeat() 的设计目标是生成静态轨道列表，不是运行时计算引擎。所以：
-
repeat(3, calc(100% / 3))→ 整行声明失效，Computed 面板为空 -
repeat(3, var(--width))→ 被当作字符串"--width"处理，不是数值，解析失败 -
repeat(3, minmax(calc(100px + var(--gap)), 1fr))→ Safari ≤15.3 和老 Chrome 会直接忽略，降级为 auto
能安全用变量的地方只有：gap: var(--gap)、minmax(var(--min-width), 1fr)（前提是 --min-width: 250px 带单位）、width: calc(var(--gap) * 2)。
auto-fit/auto-fill 必须和 minmax() 搭配才有效
写 repeat(auto-fit, 1fr) 看似简洁，实则无效——浏览器无法从纯 1fr 推出“最小可容纳宽度”，结果往往只渲染一列或完全不生效。规范强制要求 auto-fit/fill 后必须跟 minmax()，因为前者依赖后者提供下限判断依据：
-
repeat(auto-fit, minmax(250px, 1fr))✅ 正确：250px 是最小宽度，1fr 是弹性上限 -
repeat(auto-fit, minmax(250, 1fr))❌ 缺单位，语法错误 -
repeat(auto-fit, 250px)❌ 无弹性上限，等价于固定列，auto-fit 失效
别指望靠 minmax(0, 1fr) 让列无限压缩——如果子项没设 min-width: 0，它会被内容顶住，实际还是卡在 min-content 宽度。
真正需要“动态列数”时，JS 是唯一可靠路径
CSS 变量无法控制 repeat() 的第一个参数（列数），这不是兼容性问题，而是解析器层面的硬限制：repeat(var(--cols), 1fr) 在所有浏览器中都会被整条跳过。可行方案只有：
- 用 JS 读取
getComputedStyle(el).getPropertyValue('--cols')，转成数字后设el.style.gridTemplateColumns = `repeat(${n}, 1fr)` - 改用
repeat(auto-fit, minmax(var(--col-min), 1fr))，让变量只控最小宽度，不控列数本身
复杂布局里，宁可拆成两层 repeat（如 repeat(2, 100px repeat(3, 1fr))），也别试图用 calc() 或嵌套函数绕开规范——那些写法要么不生效，要么只在最新 Chrome 里偶然跑通，上线即翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
