column-width 是浏览器根据容器宽、column-gap 和该值向上取整算出列数后反推的真实列宽，需配合 column-gap、height/max-height（或 BFC）及 column-count 与 column-width 二选一使用。
column-width 是怎么算出列宽的
column-width 不是固定设置某一列的宽度，而是给浏览器一个“理想列宽”提示。浏览器会基于容器宽度、column-gap 和这个值，向上取整计算出实际列数，再反推每列真实宽度（可能略大于或等于你写的 column-width）。
比如容器宽 600px，column-gap: 20px，设 column-width: 180px：
- 浏览器先试 3 列：3×180 + 2×20 = 580 ≤ 600 → 可行
- 再试 4 列：4×180 + 3×20 = 780 > 600 → 不行
→ 最终用 3 列，真实列宽 = (600 − 2×20) ÷ 3 ≈ 186.67px
常见错误现象：column-width 设了但列数没变、列宽看起来“不听话”——大概率是容器没设 height 或 max-height，导致内容直接垂直铺满，列布局失效。
必须配合的 CSS 属性有哪些
只写 column-width 没用，它依赖多列上下文。以下三个属性缺一不可：
-
column-count和column-width二选一（不能同时为具体数值），否则后者被忽略 - 必须设
column-gap，否则默认为 0，窄屏下容易挤成 1 列 - 父容器需有明确高度限制（
height/max-height）或触发 BFC（如overflow: hidden），否则内容流式展开，不触发分列
注意：column-fill: auto（默认）会让内容优先填满第一列再进第二列，视觉上像瀑布流；column-fill: balance（默认在打印媒体中）会试图均分高度，反而破坏瀑布效果。
和 JavaScript 瀑布流（Masonry）的根本区别
CSS 的 column-* 是文档流内分段渲染，所有子元素按源顺序从上到下、从左到右折行，无法跨列控制某一项的位置。
而 JS 瀑布流（如 CSS display: masonry 实验性属性，或 Masonry 库）是逐项定位，能真正实现“最短列优先插入”，适合卡片高度差异大的场景。
所以如果你遇到这些情况，column-width 就不合适：
立即学习“前端免费学习笔记（深入）”；
- 卡片高度差异极大，且要求顶部对齐、无大片空白
- 需要响应式列数突变时保持某几项始终同排（比如广告位固定在第 2 列顶部）
- 要支持 IE 或旧版 Safari（
column-*兼容性尚可，但column-fill: auto在 Safari 14.1 前有 bug）
实际用时容易漏掉的细节
这些点不报错，但会让布局“看起来不对”：
- 子元素不能设
break-inside: avoid（除非真需要整块不拆），否则会强行撑高列高，造成底部大片留白 -
column-rule是画在列间隙里的，不是列边框；若想加边框，得给子项自己加margin或用outline - Flex/Grid 子项在 column 布局里会退化为普通块级元素，
align-items等失效 - 动画、
position: sticky在分列容器内行为不稳定，尤其滚动时
真正想靠 column-width 实现“自适应列宽”，关键不在调那个数值，而在控好容器尺寸、间隙、高度边界和子项断行策略。数值只是个建议，浏览器说了算。
