grid-template-columns: var(--cols) 必须配默认值（如var(--cols, 1fr 2fr 1fr)）、单位和正确作用域（变量需在目标选择器内定义，如.grid { --cols: ... }），否则变量未定义或作用域错位时整条规则被忽略，回退至默认流布局。
直接用 var(--cols) 替换 grid-template-columns 中的轨道定义就能动态改比例，但必须配默认值、单位和作用域，否则一刷新就崩。
为什么 grid-template-columns: var(--cols) 有时不生效
常见原因是变量未定义或作用域错位。CSS 变量不会自动继承到所有网格容器，:root 定义的 --cols 不会穿透到没显式声明该变量的选择器里。
- 变量必须在目标选择器内部定义，比如
.grid { --cols: 1fr 2fr 1fr; }，而不是只写在:root - 默认值不能省：
var(--cols, 1fr 2fr 1fr)，否则变量为空时整条规则被忽略，回退到浏览器默认流布局 - 字符串中不能有中文引号、全角空格或不可见 Unicode 字符——复制粘贴设计稿里的区域名时特别容易踩坑
- 如果用了
minmax()或fit-content()，不要把它们包进calc(var(--cols))，CSS 不支持这种嵌套
repeat(var(--n), ...) 和 var(--cols, ...) 的适用场景差异
前者适合列数固定但每列尺寸需弹性（比如“始终 4 列，但每列至少 240px”），后者适合轨道比例/宽度组合多变（比如“三栏桌面布局 vs 单栏移动端”）。
-
repeat(var(--n), minmax(0, 1fr))要求--n是纯数字（如4），不能是带单位的字符串（如"4"） -
var(--cols, 1fr 2fr 1fr)的--cols可以是任意合法轨道字符串，比如"1fr 3fr"或"200px 1fr auto" - 用
repeat()时，小屏下若容器宽度不足，minmax(0, 1fr)比纯1fr更安全，避免高度塌陷或文字挤叠 - 若列数变化剧烈（如从 5 列切到 1 列），
repeat(auto-fit, ...)无法靠变量驱动，必须切到var(--cols, ...)模式
JS 修改变量后布局没反应？检查这三点
不是代码写错了，大概率是变量没落到正确节点上，或者浏览器还没重排。
- 用
element.style.setProperty('--cols', '1fr 3fr')，别用document.documentElement.style.setProperty——除非你的 CSS 规则真写在:root里且被目标元素继承 - 修改前先读一次
getComputedStyle(element).gridTemplateColumns，强制触发重排，避免 Chrome 下偶发样式延迟应用 - 别在
resize或滚动回调里高频调用setProperty，否则触发 layout thrashing，页面卡顿
最易被忽略的是：当 --cols 控制的是含 1fr 的轨道时，父容器必须有明确高度或 min-height，否则 1fr 无参照物，整行可能塌成一条线。尤其嵌套 Grid 里，记得给中间层加 min-height: 0 断开高度继承链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
