css变量无法直接控制column-width或column-count，因浏览器不支持在该属性中解析var()，导致布局失效；正确做法是用媒体查询配合固定值，或改用grid-template-columns实现变量驱动列数。
不能用 CSS 变量直接控制 column-width 或 column-count 的值——浏览器会忽略它，布局失效。
为什么 column-width 不接受 var()
column-width 是一个「长度类型」属性，只接受像 200px、15rem 这样的静态值。CSS 自定义属性（--cw）本身无类型，var(--cw) 必须被解析为合法长度才能生效，但所有主流浏览器（Chrome/Firefox/Safari/Edge）均不支持在 column-width 中解析 var() ——解析失败即丢弃该声明，退回到默认行为（常表现为列数坍缩为 1）。
常见错误现象：
-
DevTools中该属性显示为 strikethrough（被覆盖） - 控制台无报错，但视觉上完全不像瀑布流
- 哪怕配合
calc()（如column-width: calc(var(--base) * 1.2)），依然无效
真正能响应式调整列宽的写法：媒体查询 + 固定值
浏览器对 column-width 的处理逻辑是：基于当前容器宽度、column-gap 和你写的值，向上取整试算最大可行列数，再反推真实列宽。这个过程只在样式计算阶段触发一次，不支持运行时变量重算。
所以正确做法是用媒体查询分段控制：
.masonry {
column-width: 220px;
column-gap: 16px;
column-fill: auto;
}
<p>@media (max-width: 768px) {
.masonry {
column-width: 160px;
}
}</p><p>@media (max-width: 480px) {
.masonry {
column-width: 120px;
}
}</p>
这样每段断点内，浏览器都会重新执行「试列数 → 验证总宽 ≤ 容器宽 → 定列宽」流程，结果稳定、可预测。
想用变量管理？只能用于断点值，不能用于列数值
你可以把断点尺寸抽成变量，供媒体查询复用，但 column-width 的值仍必须写死：
:root {
--bp-tablet: 768px;
--bp-mobile: 480px;
}
<p>.masonry {
column-width: 220px;
column-gap: 16px;
}</p><p>@media (max-width: var(--bp-tablet)) {
.masonry {
column-width: 160px;
}
}</p><p>@media (max-width: var(--bp-mobile)) {
.masonry {
column-width: 120px;
}
}</p>
注意：var(--bp-tablet) 在媒体查询中是合法的（CSS Level 4 支持），但它只是替换了像素值，不是让 column-width 动态变化。
替代方案：用 grid-template-columns + repeat() 实现变量驱动列数
如果你的核心诉求确实是「用变量控制列数」，grid-template-columns 是唯一原生支持 var() 的现代方案：
.grid-masonry {
--cols: 3;
display: grid;
grid-template-columns: repeat(var(--cols), minmax(0, 1fr)));
gap: 1rem;
}
但要清楚：Grid 是按行优先填充，不是真正的瀑布流（列高不均衡时 DOM 顺序和视觉顺序不一致）。若内容是卡片类、无需语义化列阅读顺序，这个方案更灵活、兼容性更好；若是长文分栏或需严格列优先渲染，仍得回退到 column-count + 媒体查询。
最容易被忽略的一点：无论用 column-width 还是 grid，子项都必须加 break-inside: avoid（多列）或确保高度不塌陷（Grid），否则视觉效果直接崩坏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
