CSS变量不能控制repeat()的重复次数，这是浏览器解析层硬性限制；只能用于minmax()阈值、gap等参数，固定列数需JS动态设置。
CSS 变量不能直接参与栅格轨道计算，但能驱动 repeat() 和 minmax() 组合，前提是单位、作用域、浏览器支持三者全对——漏一个，整条 grid-template-columns 就静默失效。
为什么 repeat(var(--cols), 1fr) 在窄屏下会崩
纯 1fr 没有最小约束，浏览器会把每列压到几像素宽，文字叠成一条线。这不是变量问题，是轨道定义缺失。
- 必须搭配
minmax()：写成repeat(var(--cols), minmax(0, 1fr))才安全 -
minmax(0, 1fr)中的0是关键——它允许列收缩到底，但不会让内容被压扁（现代浏览器下） - 更稳妥的做法是设最小阈值：
minmax(240px, 1fr)，此时变量只控制“最多几列”，而非“精确几列”
gap 用变量时 Safari 和单位陷阱
Safari 14.1 之前不支持 gap: var(--g)，且变量值若没单位，整条声明就丢弃——DevTools 里只显示 Invalid property value，无提示。
- 必须带单位：
--g: 16px✅，--g: 16❌ - 旧 Safari 需拆开写：
grid-row-gap: var(--g); grid-column-gap: var(--g); -
gap: 0不等于“紧凑”，而是子项真贴边；视觉呼吸感得靠子项自己加padding
calc() 套变量时最常静默失败的三种写法
calc() 对语法极其敏感，错一个字符就整条规则被忽略，且不报错。
立即学习“前端免费学习笔记（深入）”；
-
calc(--gap * 2)❌ —— 必须显式调用var(--gap) -
calc(var(--gap) * var(--scale))⚠️ ——--scale必须是纯数字（如1.5），不能带单位 -
calc(calc(100% - var(--gap)) / 3)❌ —— Safari 15.4 之前完全不支持嵌套calc()
嵌套网格中 CSS 变量作用域容易被忽略的点
变量必须定义在目标网格容器上，:root 定义的变量无法穿透到嵌套网格内部生效——JS 修改也无效，因为作用域没对齐。
- 错误写法：
:root { --cols: 3; }+.nested-grid { grid-template-columns: repeat(var(--cols), 1fr); } - 正确写法：
.nested-grid { --cols: 3; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); } - 区域命名（
grid-template-areas）不能用变量生成，字符串拼接在 CSS 里不存在
真正难的不是写对一行 repeat(var(--n), ...)，而是确保变量在正确作用域、带正确单位、避开老浏览器不支持的组合——这些细节一旦漏掉，布局就悄无声息地垮了，连 console 都不吭声。
