纯 CSS 无法用变量控制 repeat() 列数，因规范禁止变量作为重复次数参数；可靠方案是 JS 动态设置 gridTemplateColumns 或用 auto-fit + minmax() 实现弹性列。
纯 CSS 无法用变量直接控制 repeat() 的列数，这是语法硬限制，不是写法或兼容性问题。 浏览器解析 grid-template-columns 时，repeat() 第一个参数必须是字面量数字（如 3）或已计算完成的值，var(--cols) 不会被展开为数字，整条声明会被丢弃。
为什么 repeat(var(--cols), 1fr) 总是不生效
这不是浏览器 bug，而是 CSS 规范明确不允许。CSS 变量只做字符串替换，不参与表达式求值——repeat() 函数根本不接受变量作为重复次数参数。即使你在 :root 定义了 --cols: 3，repeat(var(--cols), 1fr) 在所有主流浏览器中都会被静默忽略，computed 样式里显示为 initial 或空白。
- 检查开发者工具的 Computed 面板，如果
grid-template-columns没有值，基本就是这个原因 -
--cols: "3"（带引号）、--cols: 3px（带单位）、--cols: 3.0（小数）都会导致失败 -
@property目前也无法绕过该限制，所有浏览器均未将其接入repeat()参数解析流程
真正能用 CSS 变量的地方：gap、minmax 内部、calc() 运算
CSS 变量在 gap、minmax() 的参数、calc() 表达式中是安全可用的，只要类型合法：
-
gap: var(--gap);——--gap: 16px有效；但--gap: 16px 8px易因空格/逗号出错，建议拆成row-gap: var(--row-gap); column-gap: var(--col-gap); -
grid-template-columns: repeat(auto-fit, minmax(var(--min-width), 1fr));——--min-width: 250px可用 -
width: calc(var(--gap) * 2);——@property可增强类型校验，但非必需 - IE 完全不支持这些用法，Safari 对变量动画支持弱，需用
@supports包裹降级
要精确控制“就是 N 列”，必须用 JS 动态设置 gridTemplateColumns
这是目前唯一可靠、跨浏览器、语义清晰的方案。关键不是“改变量”，而是读取变量后，把计算结果直接写进内联样式：
- 用
getComputedStyle(document.documentElement).getPropertyValue('--cols').trim()读值，注意去空格 - 显式转字符串：
el.style.gridTemplateColumns = `repeat(${n}, 1fr)`（n是数字） - 避免高频修改：每次设置都触发重排，Grid 计算成本高于 Flex，卡顿明显
- 如果多个容器共用同一变量，封装函数传入元素和变量名，别重复查
getComputedStyle
更轻量的替代方案：auto-fit + minmax()
如果你实际要的是“根据容器宽度自动适配列数”，而不是“必须等于变量值”，那么 repeat(auto-fit, minmax(250px, 1fr)) 是首选：
- 无需 JS，无变量解析风险，Chrome 57+ / Firefox 52+ / Safari 10.1+ 全支持
- 列数由内容最小宽度驱动，不是由变量驱动，逻辑更稳定
- 手机上自动缩为 1–2 列，桌面端撑满，不会出现“列数突变抖动”
- 缺点：不能强制“平板固定 3 列”，只能约束每列最小宽度
变量驱动列数这件事，本质是误把 CSS 变量当成 JS 变量用了。它适合控制颜色、间距、尺寸等可直接替换的值，但不适合参与轨道定义这类需要运行时数值解析的场景。真要动态列数，要么接受 auto-fit 的弹性逻辑，要么老实用 JS 把数字塞进 gridTemplateColumns——没有第三条路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
