CSS变量无法驱动column-count响应式切换，因其不支持var()解析，必须用媒体查询预设固定值；若需变量控制，应改用grid-template-columns配合repeat()。
CSS 变量无法直接驱动 column-count 的响应式列数切换——因为 column-count 不接受 CSS 变量作为有效值（浏览器会忽略它）。 你写 column-count: var(--cols); 看似合理，实际在所有主流浏览器中都会退回到初始值（通常是 1），布局完全失效。
为什么 column-count 不能用 CSS 变量
这是 CSS 规范层面的限制：column-count 属于「绝对长度/整数」类属性，而 CSS 自定义属性（--xxx）本身没有类型，必须经 var() 函数代入后被解析为合法值；但目前所有浏览器对 column-count 的 var() 解析均不支持——解析失败即丢弃该声明。
常见错误现象：
• 控制台无报错，但列数始终是默认值
• DevTools 中该属性显示为 strike-through（被覆盖/无效）
• 媒体查询里用 var(--cols) 同样不生效
真正可行的列数控制方案
绕过变量限制，用纯 CSS 实现动态列数，核心是：用媒体查询 + 预设断点 + 固定数值。CSS 变量只能用于辅助标记或 JS 协同场景。
立即学习“前端免费学习笔记（深入）”；
- 基础瀑布流必须用
column-count+column-gap，且子项需设break-inside: avoid; - 列数切换靠媒体查询，例如：
@media (min-width: 768px) { .masonry { column-count: 2; } } @media (min-width: 1024px) { .masonry { column-count: 3; } } - 若真要“用变量管理”，可把断点值抽成变量，供媒体查询复用（但列数值仍得硬写）：
:root { --bp-tablet: 768px; --bp-desktop: 1024px; } @media (min-width: var(--bp-tablet)) { .masonry { column-count: 2; } } - JS 动态改列数？可以，但别碰
column-count的 CSS 变量绑定——直接操作element.style.columnCount = '4';
替代方案：CSS Grid 模拟瀑布流（支持变量）
如果你的核心诉求是「用变量控制列数」，grid-template-columns 是更合适的选择——它原生支持 repeat() 和 var()：
- 写法示例：
.grid-masonry { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr))); gap: 1rem; } - 注意：Grid 无法实现真正的瀑布流（内容按列优先填充），而是按行优先；视觉接近但 DOM 顺序不同
- 如需真实瀑布流语义（比如长文分栏阅读），必须用
column-*；如只是卡片网格布局，Grid 更灵活、变量友好、兼容性更好
真正容易被忽略的一点：瀑布流的语义本质是「内容流式分栏」，不是「网格排列」。选 column-count 就得接受它不支持变量；想用变量，就得换模型——没有中间路线。
