直接改grid-template-columns字符串易出错，因会覆盖原有弹性逻辑（如auto-fit/minmax()），导致响应式失效；且多容器时难维护。CSS变量方案让JS只改值、不碰布局，解耦逻辑、支持媒体查询与动画。
为什么直接改 grid-template-columns 字符串容易出错
很多人尝试用 element.style.gridTemplateColumns = 'repeat(5, 1fr)' 动态更新列数，但很快发现：一旦 CSS 中原本是用 repeat(auto-fit, minmax(...)) 或带 minmax() 的响应式写法，JS 硬塞字符串会覆盖整个声明，丢失原有弹性逻辑，导致在小屏下完全失效。更隐蔽的问题是，如果父容器有多个 Grid 子元素共用同一套样式，逐个 JS 修改会漏掉、难维护。
用 CSS 变量接管列数控制，JS 只改变量值
核心思路是把列数这个“可变参数”从 CSS 声明里抽出来，交给自定义变量（如 --grid-cols），再在 grid-template-columns 中用 var(--grid-cols) 引用。JS 不碰布局逻辑，只负责设变量值。
实操建议：
- CSS 中定义基础 Grid 容器，用
var(--grid-cols)替代具体列声明：.grid {<br> display: grid;<br> --grid-cols: repeat(3, 1fr);<br> grid-template-columns: var(--grid-cols);<br> gap: 12px;<br> } - JS 修改时，统一操作
style.setProperty()：const grid = document.querySelector('.grid');<br>grid.style.setProperty('--grid-cols', 'repeat(5, 1fr)'); - 若需响应不同断点，CSS 变量本身可被媒体查询覆盖，JS 改的只是默认值，不破坏响应逻辑
动态列数 + minmax() 组合时的常见陷阱
想让列宽随容器缩放（比如每列最小 200px，最多占 1fr），直接写 --grid-cols: repeat(4, minmax(200px, 1fr))) 是合法的，但 JS 拼接时容易漏括号或空格。更稳妥的做法是把 minmax() 固定在 CSS 里，只让列数可变：
立即学习“Java免费学习笔记（深入）”；
推荐写法（CSS）：
.grid {<br> --grid-col-count: 3;<br> grid-template-columns: repeat(var(--grid-col-count), minmax(200px, 1fr)));<br>}
JS 只需改数字：
grid.style.setProperty('--grid-col-count', '6');
注意：repeat() 内部不支持嵌套 var()，所以 repeat(var(--grid-col-count), ...) 是安全的，但 repeat(3, var(--col-width)) 在部分旧浏览器中可能不生效。
兼容性与性能提醒
CSS 自定义变量在所有现代浏览器（Chrome 49+、Firefox 31+、Safari 9.1+、Edge 15+）都支持，无需 Polyfill。但要注意：
- IE 完全不支持，如果必须兼容 IE，得回退到 JS 全量重写
style.gridTemplateColumns，并手动监听resize - 频繁调用
setProperty()不会触发重排（reflow），仅触发重绘（repaint），性能比反复设置style.xxx更好 - 若列数变化伴随内容高度剧烈波动，建议给容器加
transition: grid-template-columns 0.2s ease，但注意 Safari 对该属性过渡支持不稳定，可改用opacity或transform辅助视觉平滑
最易被忽略的一点：CSS 变量是继承的，如果父级也设置了同名变量，子元素读取的是离它最近的值——调试时别只查目标元素的 style，得看 computed styles 里的实际生效值。
