纯 CSS 无法用变量控制 repeat() 的行列数量，因规范强制要求第一个参数为字面量整数；CSS 变量仅字符串替换，不参与计算，故 repeat(var(--cols), 1fr) 被静默丢弃。
纯 CSS 无法用变量控制 repeat() 的行列数量——这不是兼容性问题，是规范硬限制：浏览器解析时直接拒绝非字面量数字作为 repeat() 的第一个参数，repeat(var(--cols), 1fr) 会被静默丢弃，Computed 面板中 grid-template-columns 显示为空。
为什么 repeat(var(--cols), 1fr) 总是不生效
CSS 变量只做字符串替换，不参与表达式求值。repeat() 函数在语法层就要求第一个参数必须是字面量整数（如 3），不接受任何函数、属性引用或计算结果。即使 --cols: 3 已定义，repeat(var(--cols), 1fr) 在 Chrome/Firefox/Safari/Edge 中全部失效，且无报错提示。
-
--cols: "3"（带引号）、--cols: 3px（带单位）、--cols: 3.0（小数）都会失败 -
@property目前未接入repeat()参数解析流程，无法绕过该限制 -
calc()、attr()、env()同样不被支持
能用变量安全控制的 Grid 参数有哪些
CSS 变量可合法用于以下位置，只要类型匹配：
-
gap：单值写法最稳，如--gap: 1rem→gap: var(--gap)；需行列不同间距时，拆成row-gap: var(--row-gap)和column-gap: var(--col-gap) -
minmax()内部：如minmax(var(--min-width), 1fr)，其中--min-width: 250px有效 -
calc()表达式：如width: calc(var(--gap) * 2) -
grid-auto-rows：如grid-auto-rows: minmax(var(--row-height), auto)
注意：em/rem 作 --min-width 值可能因字体缩放意外触发换行，优先用 px。
立即学习“前端免费学习笔记（深入）”；
真正动态控制行列数的可靠方案
必须靠 JS 读取变量后，显式设置内联样式：
- 读值：用
getComputedStyle(document.documentElement).getPropertyValue('--cols').trim()获取，再parseInt()转数字 - 写入：
el.style.gridTemplateColumns = `repeat(${n}, 1fr)`（n是整数），内联样式优先级高于 CSS 规则 - 防抖：避免在
resize或scroll中高频调用，推荐监听storage或自定义事件触发更新 - 强制重排（必要时）：修改后读一次
el.offsetHeight，确保浏览器立即计算新布局
如果多个容器共用同一变量，封装成函数传入元素和变量名，别重复查 getComputedStyle。
更轻量、免 JS 的替代思路：用 auto-fit + minmax()
如果你要的是“容器变窄时自动减少列数”，而不是“必须等于某个变量值”，那完全不用 JS：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))-
auto-fit会丢弃空轨道并拉伸现有列，视觉更紧凑；auto-fill会保留空轨道，适合需要固定结构感的场景 - 搭配
clamp(0.5rem, 2vw, var(--gap))可让间距也响应式
这种组合不依赖变量控制列数，但能实现更强的自适应能力——真正的瓶颈不在变量，而在你是否真的需要“精确指定 N 列”。多数响应式需求，auto-fit 比 JS + 变量更干净、更稳定。
