根本原因是gap依赖容器的布局上下文和子项的文档流位置，拖拽中子项脱离流（如absolute）、容器display被重置、或Safari等浏览器对gap支持不全，导致gap失效。
拖拽过程中 gap 会突然消失或错位
根本原因不是拖拽本身破坏了布局，而是 dragover 事件触发时浏览器默认行为可能重绘容器、或 JS 移动 DOM 节点后未维持 Grid/Flex 的渲染上下文。尤其当子项被设为 position: absolute 或临时加了 transform 做视觉反馈时，它就脱离了 Flex/Grid 流，gap 对它失效。
- 确保所有可拖动子项保持
position: static（默认值），避免在dragstart中意外设置style.position = 'absolute' - 拖拽反馈不要靠移除元素实现，改用
opacity: 0.5+pointer-events: none临时禁用交互，保留其在布局流中的位置 - 如果必须做“插入线”提示，在容器内用伪元素
::before或绝对定位的<div class="drop-hint"></div>，别改动真实子项的display或order - 每次
drop后立即调用getComputedStyle(container).display检查是否仍为grid或flex，某些框架（如 Vue）响应式更新可能意外重置 display
动态调整 gap 值后拖拽项不跟随新间距
JS 修改 container.style.gap 或切换 CSS 类后，已存在的拖拽项不会自动重排——因为浏览器只在样式计算阶段解析 gap，而拖拽中 DOM 顺序变更不会触发该流程。你看到的“没变”，其实是旧布局缓存还在。
- 修改
gap后，手动触发一次重排：读取任意布局属性，例如container.offsetHeight，强制浏览器同步计算新 gap 下的空间分配 - 若用 CSS 变量控制间距（如
gap: var(--grid-gap)），改变量后同样需要重排，不能只靠document.documentElement.style.setProperty('--grid-gap', '16px') - 避免在拖拽进行中实时改
gap——用户手速快于渲染帧，极易造成视觉撕裂；应在dragend后再应用新值 - Grid 布局下，
gap改变会影响auto尺寸子项的可用空间，若子项含width: 100%或flex: 1，需同步检查是否溢出
移动端 Safari 14–15.4 拖拽时 gap 完全不生效
这不是拖拽导致的 bug，而是 Safari 14.0–15.4 对 gap 简写的静默忽略——哪怕你写了 gap: 12px，它也不认，且 DevTools 的 Computed 面板里直接不显示该属性。拖拽一动，布局重算，问题立刻暴露。
- 必须弃用
gap单值/双值简写，统一改用row-gap: 12px; column-gap: 12px; - Flex 容器中若启用了
flex-wrap: wrap，row-gap才起作用，漏写flex-wrap在 Safari 下 gap 表现更诡异 - 不要加
-webkit-gap，Safari 14–15.4 不支持该前缀，纯属浪费字节 - 兼容兜底方案：对 Safari UA 注入
@supports not (row-gap: 1px) { .grid { margin: -4px; } .grid > * { margin: 4px; } }，但仅限极老环境，现代项目优先切分写法
拖拽排序后 gap 在换行/多行 Grid 中分布异常
Grid 的 gap 是轨道级控制，不是子项级。当子项数量变化导致换行行数改变，原 gap 分布逻辑不变，但人眼会误判“末行太挤”或“空隙跑到顶部”。这不是 bug，是轨道模型的必然表现。
立即学习“前端免费学习笔记（深入）”；
- 确认是否真需要每行独立等距：若设计稿要求“首尾无间隙，中间有间隔”，
gap无法满足，得用padding+gap组合（如padding: 0 12px+column-gap: 24px） - Grid 中启用
grid-auto-flow: dense会打乱视觉顺序，gap 仍按轨道索引插入，极易造成“间隙跳到奇怪位置”，拖拽排序场景应禁用 - 避免用
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))+ 动态子项——子项宽度波动会导致换行点漂移，gap 看似“不稳定”，实则是列数在变 - 真正稳的做法：固定列数（如
grid-template-columns: repeat(3, 1fr)），让 gap 始终作用于明确轨道，拖拽只改 DOM 顺序，不改网格结构
拖拽布局里维持 gap 的关键，从来不是“怎么写对”，而是时刻意识到：gap 是容器的轨道协议，不是子项的装饰属性。一旦子项脱离流、容器 display 被覆盖、或轨道定义本身模糊，gap 就会退化成空气。
