css变量可动态控制grid列数：:root{--cols:3}配合grid-template-columns:repeat(var(--cols),1fr)实现，媒体查询可覆盖变量值，js修改需确保传字符串且作用域正确，ie11不支持需降级为预设类名或内联样式。
grid-template-columns怎么用CSS变量动态控制列数
直接用 grid-template-columns 配合 repeat() 和 CSS 自定义变量就能实现列数动态切换，不需要 JS 介入。关键在于变量必须是有效的长度或数字，且要配合 calc() 或合理设计单位。
常见错误是把变量写成字符串（如 --cols: "3"），或者没给默认值导致解析失败——浏览器会直接忽略整条声明。
-
--cols应定义为无单位数字：:root { --cols: 3; } - 在 grid 容器中使用：
grid-template-columns: repeat(var(--cols), 1fr); - 支持 calc 运算，比如等宽 + 间隔：
repeat(var(--cols), calc((100% - 20px) / var(--cols)))，但注意括号和空格必须合法 - 不支持表达式嵌套，
repeat(calc(var(--cols) * 2), 1fr)在多数浏览器里无效
响应式下如何用媒体查询切换CSS变量值
CSS 变量本身不触发重排，但它的值可以被媒体查询覆盖，这是实现响应式网格最轻量的方式。重点不是“改 grid 声明”，而是“换变量值”，让同一行 grid-template-columns 自动生效。
容易踩的坑是把变量定义在选择器内部却忘了提升作用域——变量必须在 :root 或父容器上定义，子元素才能继承并用于 grid 计算。
- 基础定义写在
:root：:root { --cols: 4; } - 在媒体查询中覆盖：
@media (max-width: 768px) { :root { --cols: 2; } } - 如果 grid 容器不是 :root 的后代（比如 shadow DOM 或 iframe），需在容器自身上定义变量：
.grid { --cols: 3; } - 避免在伪类中修改变量（如
:hover { --cols: 5; }），部分浏览器不触发 grid 重计算
JavaScript修改CSS变量后grid不更新怎么办
JS 修改 style.setProperty('--cols', '5') 后 grid 没反应，大概率是因为变量值非法或未触发布局重计算。CSS Grid 对变量值敏感，一个空格、一个引号、甚至小数点后多一位都可能导致整条 grid-template-columns 被丢弃。
调试时打开开发者工具，检查 computed 样式里 grid-template-columns 是否显示为 initial 或空白——那就是变量没生效。
- 确保 JS 设置的是数字类型：
el.style.setProperty('--cols', String(5))，不要传数字 5 直接进去（部分浏览器会转成 '5'，但稳妥起见显式转字符串） - 避免设置带单位的值：
--cols: 3px是错的，--cols: 3才对 - 修改后可强制触发重排：读取一次
offsetHeight，但通常没必要——现代浏览器在变量变更后会自动重计算 grid - 如果用
getComputedStyle拿不到新值，说明变量没设到正确节点上（比如设到了 body，但 grid 容器在 shadow root 里）
IE11不支持CSS变量，有没有兼容方案
IE11 完全不支持 CSS 自定义变量，grid-template-columns: repeat(var(--cols), 1fr) 会直接失效，回退到浏览器默认（通常是单列）。不能靠 @supports 检测，因为 IE11 不识别 @supports 规则本身。
真正可行的兼容思路不是“降级 grid”，而是“条件加载不同规则”——用 JS 判断环境，再注入对应样式，或服务端输出两套 class。
- 纯 CSS 方案几乎不存在：IE11 支持
display: grid，但不支持var()，所以动态列数必须放弃变量，改用预设类名：.grid-cols-2、.grid-cols-3等 - 如果必须动态，用 JS 生成内联 style：
el.style.gridTemplateColumns = 'repeat(4, 1fr)'; - 注意：IE11 的
repeat()只支持数字字面量，不支持计算，所以repeat(calc(2 + 2), 1fr)会报错 - 移动端无需考虑 IE，但老安卓 WebView（4.4 及更早）也有类似限制，建议用 caniuse 数据查具体版本支持度
变量名拼错、单位混用、作用域遗漏——这些细节比语法本身更容易卡住人。动态列数看着简单，实际每一步都在考验 CSS 变量和 Grid 的协作边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
