column-gap 无法直接用 css 变量赋值，需通过 @property 显式注册（syntax: ''; initial-value: 12px）才可在 chromium 112+/firefox 120+ 生效；safari 全系不支持，须降级为 class 控制或改用 grid-gap。
column-gap 不能用 CSS 变量直接赋值
直接写 column-gap: var(--gap); 在 Safari 和旧版 Chrome 中会被忽略，回退到默认 0 或浏览器内置值。这不是 bug，而是 column-gap 未被纳入 CSS Custom Properties 的「可变量属性」白名单（截至 2026 年 5 月，仅 Chromium 112+、Firefox 120+ 支持，Safari 全系仍不支持）。
现象是：JS 修改了 --gap，但列间距毫无变化；检查 computed styles 会发现 column-gap 显示为 initial 或未生效值。
- 必须搭配
@property显式注册，且syntax必须为'<length>'</length>（注意单引号和尖括号） -
initial-value必须带单位，比如12px，写成12会导致整个声明失效 - 不推荐用
calc(var(--gap) * 1)或clamp()绕过——无效，解析时即被丢弃
真正能动态控制 column-gap 的最小可行方案
用 @property 声明变量后，column-gap 才会响应变化。但要注意兼容性兜底：
@property --gap {
syntax: '<length>';
inherits: false;
initial-value: 12px;
}
.container {
column-count: 3;
column-gap: var(--gap);
}</length>
之后可通过 JS 切换：
document.documentElement.style.setProperty('--gap', '24px');
- Chromium 112+ / Firefox 120+：正常生效
- Safari / Edge 110-：
@property被忽略 →column-gap回退到声明的初始值（如没设，则为normal≈ 0） - 生产环境必须加降级：用 class 控制不同间距，例如
.gap-sm/.gap-lg，JS 只负责切换 class
grid-gap / gap 更适合变量驱动
如果你用的是 Grid 实现瀑布流（比如 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))），那 gap 属性对 CSS 变量的支持度远高于 column-gap：
-
gap: var(--gap)在 Chrome 99+、Firefox 98+、Safari 15.4+ 均可直接工作，无需@property - 即使在 Safari 14.1 中，
gap对var()的支持也比column-gap稳定得多 - 注意：Grid 的
gap同时控制行距和列距，若需不对称，得拆成row-gap和column-gap，而这俩又回到上一条的兼容性问题
column-width + 变量控制填充密度？别试了
有人想用 column-width: var(--col-width) 让列宽随视口或用户偏好缩放，这在所有主流浏览器中都不被支持——column-width 不在 CSS 变量可动画/可变量属性列表里，连 @property 都救不了它。
替代做法更实际：
- 用媒体查询分段控制：
@media (min-width: 768px) { .container { column-width: 280px; } } - 用 JS 监听
resize，根据window.innerWidth动态设置style.columnWidth（注意单位必须显式写，如'280px'） - 放弃「纯 CSS 变量驱动列宽」，改用 Grid 的
minmax(250px, 1fr)—— 它本身就能响应容器宽度，且天然支持变量（只要不用于column-系列属性）
真正难的不是写对语法，而是判断哪个属性值得投入变量逻辑：column-gap 和 column-width 当前仍属于「看着像能动，实则踩坑」的类型；而 grid-gap 和 grid-template-columns 中的 minmax() 是目前最稳的变量友好区。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
