CSS变量用于grid-template-columns时需显式参与repeat()计算，如repeat(var(--cols),1fr)，且--cols须为无单位数字；IE不支持该用法，Safari对transition和变量支持弱，应优先用minmax()或媒体查询 fallback。
grid-template-columns 用 CSS 变量时为什么没生效
变量必须在 grid-template-columns 值中显式参与计算，不能只写 --cols: 3 就指望浏览器自动转成 repeat(3, 1fr)。CSS 不会“理解语义”，只做字面替换。
- 错误写法：
grid-template-columns: var(--cols);（--cols值是3，但3不是合法的轨道定义） - 正确写法：
grid-template-columns: repeat(var(--cols), 1fr);，且--cols必须是无单位数字（如3，不能是"3"或3px） - IE 完全不支持
repeat()里用变量，连带整个动态列数方案失效，别试图兼容 - 若需 fallback，可用
@supports包一层：@supports (grid-template-columns: repeat(2, 1fr)) { ... }
gap 值设成 CSS 变量后间距忽大忽小
gap 接受单值（统一行列间距）或双值（行距 列距），但变量一旦设错单位或类型，渲染就不可预测——尤其当变量来自 JS 动态注入、未做校验时。
- 常见错误：
--gap: 1rem 0.5rem直接塞进gap: var(--gap)→ 实际变成gap: 1rem 0.5rem，看似对，但若变量值被 JS 改成"1rem, 0.5rem"（带逗号）或"1rem 0.5rem "（尾空格），就会退化为gap: normal - 安全做法：始终用单值控制，比如
--gap: 1rem，然后gap: var(--gap)；如需行列不同，改用row-gap和column-gap分开设变量 - 注意：Firefox 早期版本对
gap变量支持有 bug，建议最低锁定 Firefox 70+
JS 修改 CSS 变量后 grid 布局没重排
改变量本身不会触发重排，但 grid 布局依赖这些变量生成轨道，所以必须确保变量修改后，浏览器能识别到 grid-template-columns 或 gap 的计算值确实变了。
- 典型陷阱：JS 里反复设同一个值，比如
el.style.setProperty('--cols', '3')多次，但 DOM 没变，浏览器可能跳过重计算 - 稳妥做法：改完变量后，强制触发布局刷新，例如读取一次
el.offsetHeight，或给容器加个无影响的 class 切换 - 更干净的方式：把变量挂载在
:root，然后用document.documentElement.style.setProperty()，避免元素级样式污染 - 注意：不要在循环里高频修改变量，
grid重计算成本比 flex 高，卡顿明显
响应式列数切换时出现列宽抖动
本质是 repeat(var(--cols), 1fr) 中的 1fr 单元在列数突变时，各轨道宽度重新分配不同步导致的视觉跳跃，尤其在 Safari 上更明显。
立即学习“前端免费学习笔记（深入）”；
- 根本原因：浏览器按新列数直接重分剩余空间，旧列宽残留动画状态被丢弃
- 缓解方法：给容器加
transition: grid-template-columns 0.2s ease（仅 Chromium/Firefox 支持，Safari 不认） - 更可靠方案：用
minmax()替代纯1fr，例如repeat(auto-fit, minmax(250px, 1fr)))，配合--cols控制最大列数，让浏览器自己裁剪而非硬切 - 别依赖 JS resize 监听实时改变量——debounce 至少 100ms，否则移动端连续触发反而加重抖动
变量名和单位要盯死，repeat() 里嵌变量是唯一入口，其他地方全是坑。Safari 对 grid + 变量的组合支持最弱，真要全平台稳，不如用媒体查询配固定列数方案。
