column-fill: auto 是严格按流式顺序填满第一列再填第二列，不预估高度也不平衡列高；它仅在容器设了 height 或 max-height 时生效，否则形同虚设。
column-fill: auto 是什么行为，不是“不填满”而是“顺序填”
column-fill: auto 的实际效果是：内容从左到右、从上到下，**严格按流式顺序填满第一列，再填第二列，最后填第三列……** 它不预估总内容高度，也不尝试让各列视觉高度接近。所以你看到“第一列很高、最后一列只有两行”，这不是 bug，是它本意如此。
常见误解是以为 auto 表示“由浏览器自动决定怎么填”，其实它特指「顺序填充模式」——和 balance 的「平衡分配模式」互为对立选项。
- 适合场景：内容量固定、列数固定、且不介意列高差异（比如简报卡片列表、带图注的说明文本）
- 不适合场景：长新闻正文、用户可滚动阅读的容器、需要视觉齐平的排版
- 它对
column-count和column-width都生效，但不会改变列宽计算逻辑
为什么加了 column-fill: auto 还是看起来“没起作用”
因为 column-fill 只在**多列容器有明确块轴约束时才参与计算**。如果父容器是 height: auto（默认），浏览器根本不会触发列填充策略判断——它直接把内容当普通流式文本渲染，然后撑开容器高度，此时 column-fill 形同虚设。
- 必须显式设置
height或max-height（例如max-height: 500px） -
min-height不行，它不构成“填充标尺” - Flex/Grid 容器里嵌套多列时，要确认该多列元素自身是块级（
display: block）且高度可计算 - Safari 下即使写了
auto，若容器高度由字体加载延迟导致重绘，也可能短暂表现出类似balance的错觉
column-fill: auto 和 column-fill: balance 的关键区别在哪
区别不在“要不要填”，而在“怎么切内容”。auto 是线性切片：第1段→第1列，第2段→第1列……直到列满，再切下一段给第2列；balance 是全局预估：先算总高度、再按列数反推每列目标高度、最后把内容按断点尽量均分。
-
auto对不可分割元素友好：break-inside: avoid的<pre class="brush:php;toolbar:false;"></pre>或图片会整块留在某列，不会强行拆开 -
balance在遇到大图或column-span: all标题时容易失衡，某列突然变高，其他列留白 -
auto渲染更快，无回溯重排；balance首屏可能有轻微 layout shift - 两者都不影响
column-gap或column-rule的表现
真实项目中怎么安全用好 column-fill: auto
别把它当“默认保险选项”。多数人加 auto 是为了“避免 balance 失效带来的意外”，但更常踩的坑是忘了设高度，或者误以为它能解决列高不一致问题。
- 只在明确接受列高差异时使用，比如产品功能点罗列、FAQ 条目、带 icon 的短说明
- 配合
column-break-inside: avoid控制段落不被跨列截断（注意：IE 不支持） - 若内容含图片，统一设
img { max-width: 100%; height: auto; }，避免单张图撑爆一列 - 响应式中慎用
column-count+auto：小屏下三列变一列时，auto仍会按旧列数逻辑预占空间，可能造成顶部大片留白
真正难处理的从来不是写对属性值，而是你得清楚：CSS 多列本质是为静态报纸文本设计的，一旦混入动态内容、异步模块或复杂内联元素，auto 也救不了布局断裂——这时候该退就退，换 Grid 分栏更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
