grid-template-columns 中不能直接使用 var(--cols)，必须写为 repeat(var(--cols), 1fr)，且 --cols 需为无单位纯数字；gap 和 span 不支持裸变量，需带单位或改用命名线/负索引；变量须定义在 grid 容器上并确保拼写一致。
grid-template-columns 里不能直接用 var(--cols)
直接写 grid-template-columns: var(--cols) 会失效——浏览器把 --cols 的值（比如 3）当作文本，而 3 不是合法的轨道定义。CSS 不允许在轨道语法中裸写数字，必须包裹在 repeat() 里。
正确写法是：grid-template-columns: repeat(var(--cols), 1fr)，且 --cols 必须是无单位纯数字（如 3，不能是 "3" 或 3px）。
- IE 完全不支持
repeat()内使用变量，整个声明会被忽略，别试图兼容 - Firefox 70+ 才稳定支持该语法；低于此版本需降级 fallback
- 若要安全兜底，可用
@supports (grid-template-columns: repeat(2, 1fr))包一层
gap 用变量时单位必须显式写出
gap: var(--gap) 能生效，但前提是 --gap 的值已带单位，比如 12px 或 1rem。传 12 或 "12" 都不行——CSS 不做隐式单位拼接。
- JS 修改时必须写
element.style.setProperty('--gap', '12px')，不能漏单位 - 避免用双值写法（如
--gap: 1rem 0.5rem），容易因空格、逗号或 JS 注入格式错乱导致退化为normal - 更稳妥的做法：统一用单值
--gap: 12px，再配合row-gap和column-gap分开控制行列间距
span 后面不能接变量，但可以用命名线绕过
grid-column: span var(--span) 是非法语法，span 关键字后面只接受正整数，不接受计算值或变量。
想让跨距动态变化，得换思路：用命名网格线 + grid-area 或线号计算：
- 定义容器时用变量生成命名线：
grid-template-rows: [start] 60px [mid] 80px [end]; - 子元素写
grid-row: start / var(--target-line);（前提是--target-line是合法线名，如mid） - 或者用负索引：
grid-column: 2 / -1;表示“从第 2 列到最后一列”，比猜终点线号更可靠
修改变量后布局没更新？检查作用域和计算值
调用 style.setProperty('--cols', '4') 后 grid 没重排，不是 JS 错，而是 CSS 变量没落到正确节点上。
- 变量必须定义在
display: grid的**直接父容器**上，写在:root或中间祖先层可能被覆盖 - 打开开发者工具，看 computed 样式里
grid-template-columns是否真解析成了repeat(4, 1fr)；如果不是，说明变量未参与计算 - 常见陷阱：JS 设了
--grid-cols，但 CSS 里写的是repeat(var(--cols), 1fr)——拼写不一致直接失效
真正动态的跨度控制，本质是轨道结构的重定义，不是单纯改一个数字；变量只是触发器，背后依赖的是浏览器对 repeat() 和命名线的实时解析能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
