column-width 本身支持列宽自适应，无需 CSS 变量或 calc()；需满足父容器有宽度限制、设置 column-gap、使用 column-fill: auto，并通过媒体查询响应式调整。
纯 CSS 实现“列宽自适应”瀑布流，column-width 本身就能做到——它不是固定列宽，而是告诉浏览器“我想要大约这么宽”，最终列数和真实列宽由容器尺寸、column-gap 和这个值共同推算得出。用 CSS 变量定义计算公式反而多余，还容易破坏浏览器的自动计算逻辑。
为什么不要用 CSS 变量动态算 column-width
column-width 接收的是一个长度值（如 200px、15rem），不是表达式。你不能写 column-width: calc(var(--base) * 1.2)，也不能在媒体查询外靠 JS 注入变量来驱动列数变化。浏览器对 column-width 的解析是静态的、单次的，不支持运行时重排或响应式变量重计算。
- 所有主流浏览器（Chrome/Firefox/Safari/Edge）都不支持
calc()或 CSS 变量在column-width中作为动态基准 - 即使强行写成
column-width: var(--cw, 200px)，该变量一旦设死，就失去“自适应”意义；若用 JS 频繁修改，会触发强制重排，卡顿明显 -
column-width的核心机制是“试列数 → 验证总宽 ≤ 容器宽 → 取最大可行列数”，这个过程无法被变量公式接管
column-width 真正生效的三个硬性前提
列宽看着“不听话”，90% 是因为漏了以下任一条件：
- 父容器必须有明确的宽度限制（
width、max-width，或嵌套在 flex/grid 子项中） - 必须设置
column-gap（哪怕只是column-gap: 1px；默认为0时，窄屏极易坍缩为 1 列） - 必须配合
column-fill: auto（Safari 14.1 前有 bug，需加前缀-webkit-column-fill: auto）
想响应式调整列宽？用媒体查询，不是变量
需要不同断点下“倾向不同列宽”，直接切媒体查询，而不是试图用变量算出一个万能值：
立即学习“前端免费学习笔记（深入）”；
.container {
column-width: 220px;
column-gap: 16px;
column-fill: auto;
}
<p>@media (max-width: 768px) {
.container {
column-width: 160px;
}
}</p><p>@media (max-width: 480px) {
.container {
column-width: 120px;
}
}这样写，浏览器会在每个断点内重新执行“试列数 → 验证 → 定列宽”的流程，结果稳定、可预测、无兼容风险。
真正要小心的坑：子元素的 break-inside 和高度塌陷
列宽算得再准，如果子项自己“撑不开”或“拦腰截断”，视觉上就还是单列或留白严重：
- 务必给子项加
break-inside: avoid，否则长内容会被切到下一列顶部，造成错乱 - 子项不能设
height: 100%或依赖父容器height，因为多列布局下父容器高度是“内容撑开”的，不是固定值 - 避免给子项设
margin-bottom（用column-gap统一控制列间距），否则底部 margin 会累积拉高列高，导致最后一列空一大截
列宽自适应这件事，浏览器比你更懂怎么算——你只需要把上下文给齐，别插手它的计算过程。
