CSS变量控制Grid列数的实现方法

CSS变量无法直接用于`repeat()`函数的重复次数参数，因为该函数只接受字面量数字而非运行时变量值，导致`repeat(var(--cols), 1fr)`这类写法被浏览器完全忽略；若需真正实现由CSS变量动态控制确切列数，必须借助JavaScript读取变量值并手动设置`gridTemplateColumns`样式；而纯CSS方案中，`auto-fit`配合`minmax()`可实现响应式自适应列数，虽无需JS且兼容性好，却无法精确指定固定列数（如“始终4列”），仅能保障最小列宽；当前`@property`等新特性也无法突破`repeat()`的语法限制，因此开发者需根据实际需求在“JS精准控制”与“CSS自动适配”之间理性权衡。

用 --cols 变量控制 grid-template-columns 时，为什么列数没变？

因为 CSS 变量不能直接拼接进 repeat() 的第一个参数里——repeat(var(--cols), 1fr) 是无效语法，浏览器会忽略整条声明。

真正起作用的只有字面量数字或已计算好的值。变量必须先被“展开”成具体数字，再参与函数调用。

• ✅ 正确写法是：grid-template-columns: repeat(3, 1fr);（硬编码）或通过 JS 动态设置 style.gridTemplateColumns
• ❌ 错误写法：grid-template-columns: repeat(var(--cols), 1fr);（语法非法，CSS 解析失败）
• ⚠️ 注意：即使 --cols 值为 3，CSS 也不做运行时字符串替换，它不支持表达式求值

如何让 Grid 列数真正响应 CSS 变量变化？

靠纯 CSS 行不通，得靠 JS 把变量值读出来，再写回 grid-template-columns。这是目前最可靠、兼容性最好的方式。

• 监听 document.documentElement 上的自定义属性变更（比如用 MutationObserver 或手动触发）
• 读取 getComputedStyle(document.documentElement).getPropertyValue('--cols')，注意结果带空格，需 .trim()
• 用 element.style.gridTemplateColumns = `repeat(${n}, 1fr)` 显式设置（优先级高于 CSS 规则）
• 如果多个容器共用同一变量，建议封装成函数，传入容器元素和变量名

grid-auto-fit + minmax() 能替代变量控制列数吗？

能，而且不用 JS，但逻辑不同：它按容器宽度自动适配，不是按变量指定确切列数。

• 典型写法：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
• 优点：响应式强、无 JS、兼容性好（Chrome 57+ / Firefox 52+）
• 缺点：无法精确控制“就是 4 列”或“缩小时强制保持 2 列”，它只保证每列 ≥250px
• 如果业务要求“手机上固定 2 列、平板上固定 3 列”，仍需 JS 配合媒体查询或变量切换

用 @property 和 calc() 尝试“纯 CSS 方案”行不行？

目前（2024 年中）不可靠。虽然 @property 支持类型声明和继承，但 repeat() 依然不接受受控变量作为重复次数。

• @property 可用于动画或 calc() 中的数值运算，比如 width: calc(var(--gap) * 2)
• 但 repeat(var(--cols), 1fr) 仍是语法错误，连带整个声明被丢弃
• CanIUse 显示 @property 在 Safari 中支持有限，且所有浏览器均未将它接入 repeat() 参数解析流程

变量驱动 Grid 列数这件事，表面是 CSS 写法问题，实际卡在 CSS 函数设计边界上——repeat() 要求数字字面量，而变量是运行时值。绕不开 JS 就得接受自动适配逻辑，别在纯 CSS 里硬刚这个点。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS变量控制Grid列数的实现方法》文章吧，也可关注golang学习网公众号了解相关技术文章。