CSS多列布局提供了一种类似报纸排版的文本流方式，通过 column-count 或 column-width 可以快速把内容拆分成多列。但是否所有列都会保持相同高度？答案并不总是肯定。column-fill 属性专门用来控制多列容器中内容在列间的分配策略。它的表现与容器是否设置了固定高度密切相关，很多看似诡异的列高不一致问题，根源都在这个属性上。
要准确理解 column-fill，需要先明确一个前提：如果多列容器的高度由内容自动撑开，那么浏览器通常不会出现列高差异，因为总高度就是最高那一列的高度。只有当容器被指定了明确的高度，比如设置 height 或 max-height，而内容总高度超过这个限制时，列与列之间如何分割内容才会成为问题。这个时候 column-fill 就派上用场了。
column-fill属性的基本语法与取值
column-fill 的语法非常简洁，标准取值只有两个：auto 和 balance。它的初始值是 balance，且该属性不可继承。这意味着如果你不给多列容器显式声明 column-fill，浏览器默认会尝试平衡各列高度。这里需要注意，早期规范中曾出现过 balance-all 这样的非标准取值，但现代浏览器已经不再支持，实际开发中不应该使用。
下面是一个最基础的示例，展示了如何给一个固定高度的多列容器设置 column-fill：
.columns {
column-count: 3;
column-gap: 2rem;
column-fill: balance;
height: 400px;
overflow: hidden;
}
在这个例子中，容器被固定为 400px 高，内容会被分成三列。由于 column-fill 设置为 balance，浏览器会尽量让三列的内容高度接近，视觉上更加整齐。如果把值改为 auto，填充方式就会发生明显变化。auto 模式会按照内容在文档流中的顺序，先填满第一列，再依次填充后面的列，这可能导致最后一列只占很少的一部分。
还需要了解的是，column-fill 只能作用于多列容器本身，对内部元素没有直接影响。而且当容器没有设置固定高度时，auto 和 balance 在大多数浏览器中的表现几乎一致，因为容器高度由内容自然撑开，所有列都会达到最高列的高度，不存在剩余空间去分配。
balance与auto的渲染行为差异
balance 模式的核心逻辑是：浏览器先测量内容的总体高度，然后根据列数计算一个大概的平衡高度，再决定每列分配多少内容。这个过程可能触发额外的布局计算，在内容特别长或者包含大量媒体元素时，性能开销会有所增加。但从视觉角度看，balance 确实能避免某一列特别满而另一列特别空的情况。
auto 模式则简单得多。它不会预先计算内容高度，而是按照正常的块级流式布局，把内容依次填进第一列，直到该列高度达到容器限制，然后开始填充下一列。这种顺序填充的方式在某些场景下更符合逻辑，比如新闻列表的时间线排列。下面用两段代码对比一下效果：
/* balance模式：三列高度尽量一致 */
.balance-container {
column-count: 3;
column-fill: balance;
height: 300px;
}
/* auto模式：内容顺序填充，先占满第一列 */
.auto-container {
column-count: 3;
column-fill: auto;
height: 300px;
}
实际渲染时，balance 容器会尽量让每列的高度维持在 300px 左右，但由于内容总量不一定能被列数整除，最后一列可能比前两列略短，但差距不会太大。而 auto 容器中，第一列会先被内容填满到 300px，第二列继续接收剩余内容，第三列可能只有很少的内容，甚至完全没有内容。
除了视觉差异，还需要关注浏览器对 balance 算法的处理细节。Chrome 和 Safari 在实现 balance 时，会尝试把内容高度平均分配，但如果某一列中包含不可分割的元素，比如设置了 break-inside: avoid 的卡片，那么平衡效果会被打乱。Firefox 在早期版本中对 balance 的支持不够稳定，有时会出现高度异常，不过现代版本已经基本统一。
实际应用场景与兼容性处理
在哪些场景下应该优先使用 balance？当多列布局用于杂志风格的文章展示、产品特性对比卡片、或者图库缩略图时，balance 能让每一列的高度看起来更加整齐，用户扫视时不会有突兀的空白区域。如果你的内容具有严格的顺序性，比如时间线、步骤说明，那么 auto 可能更合适，因为内容流不会被重新安排。
在打印样式表里，column-fill 的作用会更加明显。打印时纸张高度固定，多列文本经常需要在页面底部自动平衡，避免出现某页只印了半列内容的情况。可以在 @media print 规则中为打印容器显式设置 column-fill: balance，同时配合 column-break-inside: avoid 来防止图片或表格跨列断裂。
关于兼容性，现代浏览器对 column-fill 的支持已经比较完善，但仍有几个细节需要留意。旧版 Safari 在平衡长内容时可能会出现卡顿，建议在内容极多的场景下使用 auto 来降低性能消耗。此外，column-fill 与 column-span 同时使用时，跨列元素会打断列平衡计算，导致 balance 失效。如果遇到这种情况，可以考虑把跨列元素放到多列容器外部，或者拆分成多个独立的多列块。
开发中若要检测当前浏览器是否支持 column-fill，可以使用 @supports 来做渐进增强：
@supports (column-fill: balance) {
.advanced-columns {
column-count: 4;
column-fill: balance;
height: 500px;
}
}
如果浏览器不支持 column-fill，上面的规则块会被忽略，回退方案通常是保持默认布局，让内容自然溢出或者配合 overflow 处理。另外要提醒的是，column-fill 不会影响单列文本的内容高度，它只负责多列之间的内容分配。如果容器高度足够容纳全部内容，balance 和 auto 的差异可以忽略不计，因此在移动端流式布局中很少需要主动设置这个属性。
掌握 column-fill 的关键在于理解固定高度这一前提，以及 balance 和 auto 在内容分配顺序上的本质区别。实际项目中多观察多列容器在 resize 过程中的列高变化，就能更直观地感受到这个属性的作用。
CSS3多列column-fill列高平衡修改时间：2026-09-28 18:21:14