必须用CSS变量+var()控制gap，因直接style赋值会破坏响应式且Safari/Firefox不支持gap动画；变量需定义在grid容器上、带单位、正确拼写，并手动添加transition。
gap 必须用 CSS 变量 + var()，不能直接赋值
直接写 element.style.gap = '12px' 看似简单，但会覆盖所有媒体查询、类名样式，破坏响应式逻辑；更关键的是，gap 作为布局属性，在 Safari 14.1–16.3 和部分 Firefox 版本中根本不支持过渡动画，视觉上就是“跳变”。真正可靠的做法是把数值抽成 CSS 变量，再用 JS 控制变量值。
- 变量必须定义在
display: grid的直接容器上（不能只写在:root）——否则内联setProperty()可能失效 -
gap值必须显式包含单位：container.style.setProperty('--grid-gap', '12px')，传12或'12'都无效 - CSS 中必须写
gap: var(--grid-gap)，漏掉var()包裹就静默失效 - 要动画，得额外加
transition: gap 0.2s ease—— CSS 变量本身不触发任何过渡
为什么 setProperty 后 gap 没变化？查这三处
常见现象是调用了 setProperty() 却没看到视觉变化，大概率卡在这几个环节：
- 打开开发者工具，检查 computed 样式里的
gap是否真为var(--grid-gap)，而不是initial或normal—— 说明被其他规则覆盖了 - 变量名大小写或拼写不一致：CSS 里写
--grid-gap，JS 却设--Grid-Gap（CSS 变量区分大小写） - 作用域错位：对父容器设了变量，但
gap: var(--grid-gap)写在子元素上 ——gap必须作用于display: grid的直接容器
响应式 + 用户交互混合控制的写法
移动端缩窄、桌面端放宽、用户还能拖动调节？别在 resize 事件里反复 setProperty，容易抖动且性能差。
- 基础断点用媒体查询定义：
@media (max-width: 768px) { .grid-container { --grid-gap: 4px; } } - JS 按需覆盖（如“紧凑模式”按钮）：
container.style.setProperty('--grid-gap', '8px')—— 内联 style 优先级高于媒体查询，覆盖有效 - 滑块实时调节用
input事件（不是change）：rangeEl.addEventListener('input', () => { container.style.setProperty('--grid-gap', `${rangeEl.value}px`) }) - Safari 14.1+ 才完整支持
gap的变量赋值；旧版需 fallback 到row-gap和column-gap分开写，并加-webkit-前缀
单位、作用域、嵌套层级，漏一个就失效
变量值必须带单位（12px，不能是 12 或 "12px"），变量必须声明在网格容器上（不是 :root），嵌套的 Grid 容器要各自设变量（外层 --grid-gap 不会继承），动画还得手动加 transition: gap —— 这四点，少一个，“动态”就变成“玄学”。
立即学习“前端免费学习笔记（深入）”；
