CSS变量无法直接用于repeat()的重复次数，因repeat()只接受字面量数字；需JS读取--cols值并动态设置gridTemplateColumns，或改用auto-fit+minmax()实现响应式列数。
用 --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 里硬刚这个点。
