repeat(var(--n), 1fr) 不生效是因为 CSS 函数内部不解析变量，repeat() 仅接受字面量数字或 auto-fit/auto-fill，var(--n) 被当作无效值丢弃，导致退化为单列或默认行为。
grid-template-columns 里用 var(--columns) 是可行的，但直接写 repeat(var(--count), 1fr) 会失效——浏览器不认这种嵌套变量写法，必须配合 minmax() 和作用域控制。
为什么 repeat(var(--n), 1fr) 不生效
CSS 函数内部不解析变量，repeat() 的第一个参数只接受字面量数字或 auto-fit/auto-fill，var(--n) 在这里会被当作无效值丢弃，最终退化为单列或默认行为。
- 错误写法：
grid-template-columns: repeat(var(--columns-count), 1fr);→ 实际渲染为repeat(0, 1fr)或直接忽略 - 正确写法：把变量用在
repeat()外层，靠minmax(0, 1fr)维持弹性，例如：grid-template-columns: repeat(var(--columns-count), minmax(0, 1fr)); - 更稳妥的替代：用内联
--columns直接赋值轨道列表，如style="--columns: 1fr 1fr 1fr;"，再配合grid-template-columns: var(--columns, 1fr);
--columns 必须定义在网格容器选择器内
变量作用域不是全局继承的。你在 :root 设置了 --columns-count: 4，但网格容器是 .dashboard-grid，且没在该类里重声明，JS 调用 document.documentElement.style.setProperty() 就不会影响它。
- 有效做法：在目标选择器里定义变量，比如
.grid { --columns-count: 4; } - 内联方式最省事：
<div class="grid" style="--columns-count: 3">，JS 改el.style.setProperty('--columns-count', '5')立刻生效 - 避免跨层级污染：嵌套网格要隔离变量名，比如子网格用
--sub-columns，别复用父级--columns-count
IE11 和 Safari 14.1 之前的兼容性陷阱
var() 在 grid-template-columns 中不被 IE11 支持；Safari 14.1 之前也不支持 gap: var(--g)，只认 grid-row-gap 和 grid-column-gap 拆开写。
立即学习“前端免费学习笔记（深入）”；
- 降级方案：用
@supports (display: grid)包裹现代写法，并 fallback 到display: flex+flex-wrap - gap 变量必须带单位：
--g: 16px✅，--g: 16❌（Safari 会忽略） - gap 为 0 时视觉拥挤：子项需自己加
padding补偿呼吸感，例如.grid > * { padding: calc(var(--g, 0) / 2); }
JS 动态改列数后样式没更新？检查这三点
常见“设了变量但布局不动”问题，90% 出在作用域、单位、或未触发重排。
- 确认变量定义位置和 JS 修改目标是否一致：修改
document.documentElement只对:root下生效，容器类没继承就白改 - 确保变量值含单位（列数除外）：列数是纯数字，但
gap、min-width等必须带px、rem等 - 某些旧版 Safari 需要强制重排：改完变量后调用
el.offsetWidth触发 layout flush
复杂点不在语法本身，而在变量作用域和浏览器解析顺序——同一份 CSS，在 Chrome 里跑通，到了 Safari 或旧 Edge 就卡在 var() 解析环节。真正要命的不是“怎么写”，而是“在哪写、对谁写、写了之后谁真看见”。
