CSS变量无法实现真正瀑布流，因其仅能静态控制列数或等宽栅格，不能读取DOM高度、触发重排或决定元素插入位置；唯一可用场景是column-count配合var(--cols)做响应式分栏，且需break-inside: avoid和禁用flex/grid容器。
CSS 变量无法实现真正的瀑布流列宽动态控制——它连“列宽”这个概念都不该出现在瀑布流里。
为什么 CSS 变量对瀑布流列宽“无能为力”
CSS 变量（--col-count）可以配合 calc() 控制子项宽度，比如 width: calc(100% / var(--col-count));，但这只是在模拟等宽栅格，不是瀑布流。瀑布流的核心是「按高度排序插入最短列」，而 CSS 变量既不能读取 DOM 元素高度，也无法触发重排逻辑，更无法决定「第 7 个元素该塞进哪一列底部」——那属于运行时布局算法，CSS 静态变量完全不参与。
常见错误现象：
- 用
--col-count: 3+width: calc(100% / var(--col-count))后，所有子项仍自上而下线性排列，视觉上仍是单列长条 - 强行加
float: left或display: inline-block，结果因文档流顺序固定，列高永远无法自动平衡
column-count 是唯一能用 CSS 变量“微调”的伪瀑布流场景
只有原生多列布局（column-count）允许用 CSS 变量做响应式列数切换，且无需 JS 干预。但它不控制“列宽”，只控制“列数”，容器内内容由浏览器自动分栏填充。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 定义变量：
:root { --cols: 3; } - 应用到容器：
.waterfall { column-count: var(--cols); column-gap: 16px; } - 子项必须加
break-inside: avoid;，否则图片/段落可能被硬生生截断跨列 - 媒体查询中可动态改值：
@media (max-width: 768px) { :root { --cols: 2; } }
注意：column-count 容器绝不能设 display: flex 或 display: grid，否则多列渲染直接失效。
Grid 和 Flex 布局里用变量算“列宽”本质是自欺欺人
有人写 grid-template-columns: repeat(var(--col-count), 1fr) 或 flex: 0 0 calc(100% / var(--col-count))，看起来像瀑布流，实则只是等高网格或换行流式布局：
-
display: grid的grid-auto-flow: dense不会按高度排序，只按 DOM 顺序填空位 -
display: flex的flex-wrap: wrap按行换行，每行高度取该行最高项，无法形成错落感 - 所有这些方案都忽略一个事实：瀑布流要求「列高独立增长」，而 CSS 变量驱动的布局根本没有列容器的概念
真正需要动态列宽分配时，你其实想要的是栅格系统
如果你的需求其实是「根据屏幕宽度自动切分为 2/3/4 列，并让每列占等宽百分比」，那 CSS 变量 + calc() 确实可用，但这和瀑布流无关：
- 用
--cols: 4→width: calc(100% / var(--cols) - 8px)（扣掉 gap） - 必须手动处理
margin、box-sizing、响应断点，且子项需清除浮动或避免换行错位 - 这种写法适合卡片列表、商品橱窗等整齐布局，不是瀑布流
容易被忽略的关键点：浏览器不会因为用了 CSS 变量就获得运行时布局决策能力。所谓“动态”，只是开发者手动切换变量值后触发样式重计算，而非自动感知内容高度并重排——那个动作，至今仍得靠 JS 或原生 column-count 的黑盒分栏机制来完成。
