column-count 不支持 css 变量，因其属整数型属性，var(--cols) 无法被解析为合法整数；唯一兼容方案是 grid-template-columns: repeat(var(--cols), 1fr)，但 grid 非瀑布流布局。
column-count 不接受 CSS 变量，直接写 column-count: var(--cols) 会失效——所有主流浏览器都忽略它，回退到默认列数（通常是 1）。
为什么 column-count 不能用 CSS 变量
这是规范层面的限制：column-count 属于「整数型」属性，而 var(--x) 在解析时无法被认定为合法整数。浏览器不支持在该属性中运行时解析变量，DevTools 里这条声明会显示为 strike-through，但控制台无报错，容易误判为“写对了”。
-
column-count: clamp(2, var(--cols), 5)同样无效，clamp()也无法绕过解析限制 -
calc(100% / var(--cols))之类写法对column-count完全不适用——它只认纯数字或auto - 即使配合
@property声明类型，也仅 Chromium 110+ 和 Firefox 119+ 支持，Safari 全系不支持
真正能用变量的地方：只限 grid-template-columns
如果你的目标是“用变量控制列数”，grid-template-columns: repeat(var(--cols), 1fr) 是唯一原生支持且兼容性良好的路径（Chrome 115+、Firefox 119+、Safari 16.4+）。但注意：Grid 是行优先布局，不是真正的瀑布流语义。
- 必须确保
--cols是整数，例如：:root { --cols: 3; } - 别写
repeat(var(--cols), minmax(0, 1fr))—— Safari 对minmax(0, 1fr)中的0解析不稳定，建议用1fr或minmax(280px, 1fr) - 若需响应式自适应列数（比如随容器宽度增减），应改用
repeat(auto-fit, minmax(var(--col-min), 1fr))，变量只控最小列宽，不控列数本身
想保留真实瀑布流？只能靠 class 切换或媒体查询
要维持 column-count 的语义（内容按列填充、适合长文阅读），就放弃“变量驱动”的幻想，改用预设 class 或媒体查询硬编码数值。
- 最稳做法：
.cols-2 { column-count: 2; }+ JS 调用el.classList.replace('cols-3', 'cols-4') - 媒体查询中可复用 CSS 变量定义断点，例如
@media (min-width: var(--bp-desktop))，但column-count的值仍得写死 - Less/Sass 用户可用变量统一管理这些硬编码值，但本质仍是编译期静态输出，不是运行时响应
真正容易被忽略的点：很多人以为加了 @property 就万事大吉，却忘了检查 Safari 兼容性；或者把 Grid 当作瀑布流替代方案，结果发现 DOM 顺序和视觉顺序不一致，影响 SEO 和屏幕阅读器体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
