CSS变量能否用来控制Grid布局的列数

CSS变量无法控制repeat()列数是规范限制，因repeat()首参必须为字面量数字；可行方案为JS读取变量并写入内联样式，或用auto-fit+minmax()实现响应式列数。

不能直接用 CSS 变量控制 repeat() 的列数，这是规范层面的硬限制，不是写法或兼容性问题。

为什么 repeat(var(--cols), 1fr) 总是失效

浏览器解析 grid-template-columns 时，repeat() 第一个参数必须是字面量数字（如 3），var(--cols) 不会被展开为数值——它只是字符串替换，而 repeat() 不接受运行时表达式。所有主流浏览器（Chrome、Firefox、Safari、Edge）均静默丢弃该整条声明，Computed 面板里 grid-template-columns 显示为空或 initial。

• --cols: "3"（带引号）、--cols: 3px（带单位）、--cols: 3.0（小数）全都会失败
• @property 目前无法绕过该限制，Chromium/Firefox/Safari 均未支持
• DevTools 中该行显示 strikethrough，但控制台无报错，容易误判为“写对了”

真正能用变量的地方：只限 minmax()、gap、calc()

CSS 变量在以下位置是安全且广泛支持的（Safari 14.1+、Chrome、Firefox、Edge）：

• gap：必须带单位，--gap: 16px ✅，--gap: 16 ❌；建议拆成 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) 可用，但 calc(var(--cols) * 2) 在多数浏览器中仍无效

如何实现“变量控制列数”的实际方案

要让列数真正响应变量变化，必须靠 JS 读取并拼接合法值，再写入内联样式：

立即学习“前端免费学习笔记（深入）”；

• 确保变量作用域对齐：在目标网格容器上定义，如 .grid { --cols: 3; }，而非仅挂 :root
• JS 中读取并转换：const n = parseInt(getComputedStyle(gridEl).getPropertyValue('--cols').trim())
• 写入样式：gridEl.style.gridTemplateColumns = `repeat(${n}, minmax(0, 1fr))`（加 minmax(0, 1fr) 防窄屏压缩）
• 避免高频调用：每次设置都触发重排，Grid 计算成本高于 Flex，resize 或滚动中慎用

更轻量、更推荐的替代思路：auto-fit + minmax()

如果你实际要的是“随容器宽度自动适配列数”，而不是“必须等于某个变量值”，那完全不用 JS：

• grid-template-columns: repeat(auto-fit, minmax(var(--col-min), 1fr))
• 变量只控最小列宽（如 --col-min: 280px），不控列数本身
• 浏览器自动计算能放几列，空轨道被收掉，空间重新分配给有内容的列
• 语义清晰、无需 JS、天然响应式、兼容性好

最容易被忽略的点：很多人以为把变量塞进 repeat() 就完事了，结果布局消失却找不到原因；或者用 Grid 模拟瀑布流时，没意识到 DOM 顺序和视觉顺序不一致，影响 SEO 和屏幕阅读器体验。