column-gap 不支持 transition 动画，其变化触发重排而非过渡；应改用 margin、transform、grid-column-gap（部分浏览器）或 width/opacity 等可动画属性实现视觉平滑效果。
column-gap 本身不触发 transition
直接给 column-gap 加 transition 是无效的——浏览器不会把它当作可动画属性。你看到布局“跳变”，不是因为过渡没写对，而是因为压根没动起来。CSS 多列布局（columns / column-count）的间隙变化本质是重排（reflow），而 column-gap 在绝大多数浏览器里至今不支持过渡动画。
用 transform 模拟 column-gap 的视觉过渡
真正能平滑过渡的是元素自身的位移或缩放。常见做法是放弃依赖 column-gap 动画，转而控制子项的 margin 或整体容器的 transform 来伪造间隙变化效果：
- 给每列子元素统一加
margin-right，并在媒体查询中用transition: margin-right 0.3s ease - 用
display: grid替代columns，因为grid-column-gap在部分新版本 Chrome/Firefox 中已支持 transition（但 Safari 仍不稳定） - 若必须用多列，可包裹一层
overflow: hidden容器，用scale微调整体缩放来“柔化”间隙突变感
监听列数变化时的实际可动画点
真正稳定可过渡的，是那些浏览器明确支持动画的属性，比如：
-
width或max-width控制单列宽度（配合flex或grid） -
opacity+visibility配合transition-delay实现列内容渐显/隐 -
height（需设overflow: hidden）用于折叠/展开多列区域 - 避免对
column-count做过渡——它只能离散切换，强行加 transition 会被忽略
Chrome DevTools 里验证是否真在动画
别只看视觉，打开 DevTools 的 Rendering 面板，勾选 Paint flashing 和 Layout Shift Regions：
立即学习“前端免费学习笔记（深入）”；
- 如果间隙变化时整块区域频繁闪红（paint），说明在强制重绘，transition 没生效
- 如果只有边缘轻微闪烁，且时间轴里能看到
transform曲线，说明走的是合成层动画，性能才靠谱 - Safari 用户尤其要注意：
column-gap连 hover 变化都可能触发 layout，更别说 transition
平滑感不是靠堆 transition 属性，而是选对那个浏览器真愿意动起来的属性。列布局的响应式切换，本质是权衡——用 grid 换兼容性，用 margin 换可控性，用 scale 换感知流畅度。选哪个，取决于你不能妥协的那条线在哪。
