repeat() 只接受 minmax()、fit-content() 等特定值，禁用 calc() 和 css 变量；auto-fit/fill 必须配 minmax()；命名线不可嵌套；其本质是语法糖，无运行时逻辑。
repeat() 里不能套 minmax() 以外的函数
很多人写 repeat(3, minmax(100px, 1fr))) 成功了，就以为可以继续嵌套，比如 repeat(2, calc(100% / 3)) 或 repeat(2, fit-content(200px))——这些全都不合法。CSS 规范只允许 minmax()、fit-content()、max-content、min-content 和轨道尺寸关键字（如 auto、1fr）作为 repeat() 的第二个参数；calc() 虽然能出现在轨道定义中，但**不能直接作为 repeat() 的子项**，否则整条 grid-template-columns 声明被静默丢弃。
常见错误现象：grid-template-columns: repeat(2, calc(200px + var(--gap))) 在所有浏览器里都无效，Computed 面板显示为空；换成 repeat(2, 200px) 1fr 或用 minmax(calc(200px + var(--gap)), 1fr) 才能走通。
repeat(auto-fit) 或 repeat(auto-fill) 后面必须跟 minmax()
repeat(auto-fit, 1fr) 看起来合理，实际是废代码：浏览器无法从纯 1fr 推出“最小可容纳宽度”，结果往往只渲染一列或完全不生效。规范强制要求 auto-fit 和 auto-fill 必须与 minmax() 搭配，因为前者需要后者提供下限判断依据。
-
repeat(auto-fit, minmax(250px, 1fr)))✅ 正确：250px 是最小宽度，1fr 是弹性上限 -
repeat(auto-fit, minmax(250px, max-content))✅ 合法，但需注意max-content可能撑破容器 -
repeat(auto-fit, 250px)❌ 无效，会被忽略 -
repeat(auto-fit, minmax(250, 1fr))❌ 缺单位（250不是250px），语法错误
repeat() 第一个参数永远不能是 CSS 变量
repeat(var(--cols), 1fr) 在任何浏览器里都不会工作，这不是兼容性问题，而是 CSS 解析器在语法层就拒绝——repeat() 的重复次数必须是字面量数字（如 3）、auto-fit 或 auto-fill，变量只做字符串替换，不参与数值求值。你看到的“列没出来”，大概率就是这行声明被整个跳过了。
真正能用变量的地方只有：
-
gap: var(--gap)（前提是--gap: 16px这类带单位的值） -
minmax(var(--min-width), 1fr)（--min-width: 250px） width: calc(var(--gap) * 2)
想动态控制列数？只能 JS：读取 getComputedStyle(document.documentElement).getPropertyValue('--cols')，转成数字后设 el.style.gridTemplateColumns = `repeat(${n}, 1fr)`。
repeat() 不是函数调用，是轨道列表语法糖
它没有执行上下文，不支持嵌套表达式、不接受条件逻辑、也不能和 grid-template-areas 混用。写成 repeat(2, [col-a] 1fr [col-b] 2fr) 是错的——命名线只能出现在 grid-template-columns 顶层定义中，不能塞进 repeat() 括号里。
容易踩的坑：
- 逗号后面必须有空格：
repeat(2, 1fr)对，repeat(2,1fr)错 - 多轨道模式用空格分隔：
repeat(2, 1fr 2fr)表示重复「1fr 2fr」这个组合，共 4 列；写成repeat(2, 1fr, 2fr)直接语法错误 -
repeat()前后若混用其他轨道，必须用空格连接：repeat(2, 1fr) 20px repeat(2, 1fr)合法；加逗号或换行就失效
最常被忽略的一点：你写的每一条 repeat()，最终都会被浏览器展开成等价的轨道列表（比如 repeat(3, 1fr) → 1fr 1fr 1fr），所以它的“灵活性”全是假象——真要响应式，得靠 auto-fit + minmax() 配合容器尺寸变化来驱动重计算，而不是指望 repeat 自己变聪明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
