CSS变量在grid中需显式参与repeat()计算，如repeat(var(--cols),1fr)；gap变量须单值或分设row/column-gap；修改变量后需触发重排；auto-fill/auto-fit不可与var混用。
grid-template-columns 里用 var(--cols) 必须套 repeat()
直接写 grid-template-columns: var(--cols) 不会生效，哪怕 --cols 的值是 3。CSS 不做语义推导，只做字面替换，而 3 本身不是合法的轨道定义。
正确写法必须显式参与 repeat() 计算：grid-template-columns: repeat(var(--cols), 1fr)，且 --cols 必须是无单位数字（如 3，不能是 "3" 或 3px）。
- IE 完全不支持
repeat()内使用变量，整个声明会静默失效 - Safari 对变量 +
repeat()的 transition 支持弱，动画过程可能出现列宽跳变 - 若需降级，用
@supports (grid-template-columns: repeat(2, 1fr))包一层，里面再写变量版本
gap 设成变量时为什么间距忽大忽小
gap 接受单值（统一行列间距）或双值（row-gap column-gap），但变量一旦格式错，浏览器就退化为 gap: normal，导致视觉混乱。
常见错误包括：--gap: 1rem 0.5rem 直接塞进 gap: var(--gap) —— 看似合理，但若 JS 后续改成 "1rem, 0.5rem"（带逗号）或末尾多空格，就会失效。
立即学习“前端免费学习笔记（深入）”；
- 安全做法：只用单值控制，如
--gap: 1rem，然后gap: var(--gap) - 如需行列间距不同，改用
row-gap: var(--row-gap)和column-gap: var(--col-gap)分开设 - Firefox 70 以下对
gap变量有渲染 bug，建议锁定最低版本
JS 修改 CSS 变量后 Grid 没重排
改变量本身不会强制触发 grid 重计算。浏览器只在检测到 grid-template-columns 或 gap 的计算值真正变化时才重排，而反复设相同值（如 setProperty('--cols', '3') 多次）可能被跳过。
- 稳妥做法：修改后读一次
offsetHeight强制触发布局刷新 - 更干净的方式：把变量挂到
:root，用document.documentElement.style.setProperty()统一管理 - 避免在循环中高频修改，grid 重计算成本明显高于 flex，卡顿感知强
auto-fill / auto-fit 和变量混用的列宽抖动
写成 repeat(var(--cols), minmax(250px, 1fr)) 是无效语法——var(--cols) 不能和 minmax() 并列在同一个 repeat() 里。正确组合只能是 repeat(var(--cols), 1fr) 或 repeat(auto-fill, minmax(250px, 1fr))，二者不可混用。
想实现“变量控列数 + minmax 控单列范围”，只能二选一：
- 用变量控制总列数 → 适合固定结构（如仪表盘始终 4 列），但无法响应容器宽度
- 用
auto-fill/auto-fit+minmax()→ 真正响应式，但列数由浏览器实时算，JS 无法精确干预 - 若两者都要，得靠 JS 先算出列数（如
Math.floor(containerWidth / 250)），再注入变量，但需同步监听 resize
最后提醒：Safari 中 repeat(var(--cols), 1fr) 列宽突变时容易抖动，因为 1fr 重分配不同步，这不是代码错，是当前引擎限制。
