应使用 CSS 变量接管网格列数等动态参数，而非直接修改 grid-template-columns 字符串；通过 setProperty 修改 --grid-col-count 等变量，配合 minmax() 保持响应式逻辑，注意作用域、拼写及 IE 兼容性。
直接改 grid-template-columns 字符串会破坏响应式逻辑
很多人一上来就写 element.style.gridTemplateColumns = 'repeat(4, 1fr)'，结果发现原本带 minmax() 或 auto-fit 的响应式网格在小屏下直接崩了。这是因为 JS 覆盖的是整个声明值，把 CSS 里写的弹性逻辑全抹掉了。更麻烦的是，如果多个容器共用同一套类名，你得挨个查、挨个设，漏一个就样式不一致。
用 CSS 变量接管“可变参数”，JS 只负责设值
核心是把真正需要动态的部分抽出来：列数、列宽、间隙这些数值型参数，而不是整条 grid-template-columns 声明。比如：
:root {
--grid-col-count: 3;
}
.grid {
display: grid;
grid-template-columns: repeat(var(--grid-col-count), minmax(200px, 1fr)));
gap: var(--grid-gap, 12px);
}
这样 JS 只需改数字：
const grid = document.querySelector('.grid');
grid.style.setProperty('--grid-col-count', '5');
-
repeat()内部支持var(--grid-col-count)，但不支持嵌套var()（比如repeat(3, var(--col-width))在部分旧浏览器会失效） - 变量定义在
:root就用document.documentElement.style.setProperty()；定义在具体元素上，就得调该元素的.style.setProperty() - 变量名必须带双短横线前缀，
--grid-col-count写成-grid-col-count或grid-col-count都无效
批量更新多个变量时别循环调 setProperty
频繁修改单个变量（比如滚动中实时更新 --scroll-y）可能掉帧，不是因为方法错，而是浏览器要重算所有依赖该变量的样式。批量改时，用 Object.entries(vars).forEach(([k, v]) => el.style.setProperty(k, v)) 比逐个调略好，但差异微乎其微——真正影响性能的是改的频率和变量被多少属性引用，而不是调用次数。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的一点：setProperty 不触发重排，但会触发重绘；如果变量控制的是 background-color 或 box-shadow 这类 paint 层属性，高频更新照样卡。建议配合 requestAnimationFrame 节流，尤其在 mousemove 或 scroll 事件里。
读不到变量值？先检查作用域和拼写
getComputedStyle(el).getPropertyValue('--my-var') 返回空字符串，大概率不是 JS 问题：
- 变量根本没在对应作用域定义（比如在
.card里定义了--bg，却去document.documentElement上读） - 拼写错误：大小写敏感、多一个空格、少一个短横线（
--color≠--Color≠-color） - DOM 还没挂载就调用了
setProperty（比如document.body尚未 append 到document时就设变量，静默失败）
IE 完全不支持 CSS 变量，如果项目还需兼容，得引入 css-vars-ponyfill，但注意它无法支持 var() 嵌套或动画。
