CSS变量不能直接用于column-count，需用@property声明或class切换；@property仅Chromium110+/Firefox119+支持，Safari全系不支持；最稳方案是预设.cols-n类并用JS切换。
用 :root 定义 CSS 变量控制列数，但别直接赋给 column-count
直接写 column-count: var(--cols); 看似合理，但多数浏览器（尤其是 Safari 和旧版 Chrome）不支持在 column-count 中使用 CSS 变量——它会被忽略，回退到默认值（通常是 1）。这不是语法错误，而是该属性尚未被纳入 CSS Custom Properties 的「可动画/可变量化」白名单。
真正可行的做法是：用变量驱动 class 切换，或配合 @property（需检查兼容性）。
- 最稳方案：预设几组
.cols-2、.cols-3类，通过 JS 切换 class，CSS 内硬编码column-count: 2等 - 较新方案：用
@property显式注册变量类型，让column-count能响应变化（仅 Chromium 110+、Firefox 119+ 支持） - 不推荐方案：试图用
calc()或伪变量兜底（如column-count: clamp(2, var(--cols), 5)），无效
@property 注册 --cols 后才能用于 column-count
这是目前唯一能让 column-count 真正响应 CSS 变量更新的方式，但必须显式声明变量类型为
@property --cols {
syntax: '<integer>';
inherits: false;
initial-value: 3;
}
.container {
column-count: var(--cols);
}
</integer>
之后可通过 JS 动态修改：document.documentElement.style.setProperty('--cols', '4');
- 必须加
@property声明，缺一不可 -
syntax: '不能写成' '或漏掉引号' -
initial-value必须符合 syntax 类型，否则整个声明失效 - IE 和 Safari 全系不支持
@property，生产环境需降级 fallback
JS 切换 class 是兼容性最好的动态列数方案
放弃「纯 CSS 变量驱动」的执念，用 class 控制更可靠。只需提前写好几组规则，JS 只负责增删 class，无兼容性陷阱。
.container { column-gap: 1rem; }
.container.cols-2 { column-count: 2; }
.container.cols-3 { column-count: 3; }
.container.cols-4 { column-count: 4; }
调用时：el.classList.replace('cols-3', 'cols-4'); 或 el.className = 'container cols-4';
- 避免用
setAttribute('class', ...)覆盖可能存在的其他 class - 若列数范围大（如 2–12），可用
data-cols="4"+ 属性选择器：[data-cols="4"] { column-count: 4; }，减少类名爆炸 - 注意：列数突变时内容会重排，无过渡动画；如需平滑效果，得靠 JS 拆分/合并元素模拟，非纯 CSS 能解
响应式列数别只靠媒体查询，要结合容器查询（@container）
瀑布流常嵌在弹性容器里，用 min-width 媒体查询控制列数容易错位（比如父容器宽度没变，但 viewport 变了）。更合理的是监听容器自身宽度：
@container (min-width: 600px) {
.container { column-count: 2; }
}
@container (min-width: 900px) {
.container { column-count: 3; }
}
前提是父容器启用了容器查询：container-type: inline-size;
- 容器查询兼容性比
@property更差（Safari 16.4+、Chrome 105+），需@supports包裹 - 别忘了给最近的块级祖先加
container-name: grid;或用匿名容器 - 和 JS 切换 class 方案不冲突，可共存：容器查询处理常规响应，JS 处理用户手动切换
实际项目里，@property 方案看着漂亮，但 Safari 用户看到的还是单列；真要稳，class 切换 + 容器查询 fallback 是目前最务实的组合。列数变更本身不复杂，难的是让所有浏览器都“看见”那一瞬间的重排。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
