var(--columns)必须带fallback，因未定义时整条grid-template-columns声明失效而退化为单列，静默难排查；最低兜底为var(--columns, 1fr)，多级降级需嵌套var(--columns, var(--fallback))。
直接用 var(--columns) 配合 grid-template-columns 就能动态生成网格列定义，但裸用会崩——未定义变量时布局直接退化为单列，且不报错、难排查。
为什么 var(--columns) 必须带 fallback
CSS 变量未定义时，grid-template-columns: var(--columns) 不是“忽略变量继续解析”，而是整条声明失效，浏览器回退到默认单列行为。这在响应式切换或 SSR 首屏时极易静默出错。
-
grid-template-columns: var(--columns, 1fr)是最低限度兜底，适用于默认单列场景 - 若需默认双列（如移动端 fallback），得用嵌套变量：
grid-template-columns: var(--columns, var(--fallback))，并在 HTML 中同时设style="--columns: 1fr; --fallback: 1fr 1fr" - 空字符串
""、unset、数字0都不会触发 fallback，别试
repeat(var(--count), ...) 怎么防窄屏塌陷
只改列数不加约束，repeat(var(--count), 1fr) 在小容器里会让每列缩到几像素宽，文字叠在一起。关键不是变量本身，而是轨道函数没加最小限制。
- 必须搭配
minmax()：repeat(var(--count), minmax(240px, 1fr))—— 保证每列至少可读 -
minmax(0, 1fr)更宽松，适合高度受限但宽度不确定的场景（如弹窗内网格） - 变量
--count必须是无单位数字（如--count: 4），不能是字符串"4" - 该变量必须定义在目标选择器内（如
.grid { --count: 3; }），挂:root无法生效
哪些值能用变量，哪些不能
grid-template-columns 和 grid-template-rows 安全支持 var()；grid-template-areas 完全不支持变量插值，拼接字符串（如 "header header" var(--footer)）是非法语法，整条声明会被浏览器丢弃。
立即学习“前端免费学习笔记（深入）”；
- 列/行轨道：可用
var(--cols, 1fr 2fr 1fr)，默认值建议加双引号更稳（"1fr 2fr 1fr"） - 区域定义：必须预定义完整字符串，靠类名切换（如
.layout-mobile { grid-template-areas: "header" "main" "footer"; }） - 别用
calc(var(--cols))—— CSS 不解析calc()内部的变量 -
gap可用变量，但 Safari 14.1 前需拆成grid-row-gap和grid-column-gap，且值必须带单位（--g: 16px✅，--g: 16❌）
JS 动态修改时最容易卡住的点
调了 setProperty 却没反应，90% 是作用域或写法问题。不是 JS 不行，是变量没落到真正生效的位置。
- 确保变量定义在目标元素选择器内，例如容器有类
.dashboard-grid，就得写.dashboard-grid { --cols: 3; }，而非只挂在:root - JS 修改必须操作该元素：
el.style.setProperty('--cols', '5')，不是document.documentElement.style.setProperty - 避免在
resize或scroll里高频调用，否则触发 layout thrashing，页面卡顿 - 切换前可先读一次
getComputedStyle(el).gridTemplateColumns，强制触发重排，避免 Chrome 偶发样式延迟应用
真正难的从来不是语法，而是变量命名和取值边界的管控——比如所有 --cols 值由构建脚本生成、禁止手写、统一空格规范，否则 --cols: 1fr 1fr 和 --cols: 1fr 1fr （末尾多空格）会一个生效一个静默失败。
