column-fill: auto 导致多列高度不一，因其按顺序流式填充且不预估高度；column-fill: balance 需配合 height 或 max-height 才生效，否则无效。
column-fill: auto 本身不解决高度不一问题，它只是让浏览器按顺序填满一列再填下一列——结果往往是前几列高、最后一列明显矮。真要“强制平衡”，得用 column-fill: balance，但前提是容器必须有明确高度（height 或 max-height），否则该属性压根不生效。
为什么column-fill: auto会让多列高度不一致
这是它的设计行为：内容从左到右、从上到下流式填充，不预估总高度，也不回溯重排。只要容器高度是 auto，浏览器就按内容自然撑开，各列高度由内部段落、图片、换行点决定，毫无平衡可言。
- 常见错误现象：
column-count: 3下，第一列有5段文字，第二列只有2段，第三列空着半截 - 即使加了
column-gap或column-rule，也改变不了填充逻辑 - 在响应式场景中，列数随宽度变化，但
auto模式仍坚持“填满即止”，加剧视觉割裂
column-fill: balance 必须配固定高度才起作用
没有 height 或 max-height，balance 就是摆设。浏览器需要一个“标尺”来衡量“怎么才算平衡”。一旦设了定高，它才会尝试把内容切片、预分配，尽量让每列视觉高度接近。
- 示例有效写法：
.text-columns { columns: 3; column-fill: balance; height: 400px; /* 必须！不能是 auto 或 unset */ } - 注意
height不宜过小：若内容总量远超该高度，会触发溢出（overflow: visible默认裁剪不可见），用户看不到后半部分 -
max-height更稳妥：允许容器在内容少时自动收缩，内容多时截断并出现滚动条（需配合overflow-y: auto）
定高 + balance 的实际限制和坑
它不是万能的，尤其在真实项目里容易踩几个隐性雷：
- 不可分割元素（如大图、
块、设置了break-inside: avoid的容器）会阻断平衡逻辑，导致某列突然变高，其他列被迫留白 - 字体渲染差异（比如 Web Font 加载延迟）可能让首次渲染时高度计算错误，重绘后才“跳”成平衡态
- 在 Flex/Grid 容器里嵌套多列布局，父级的
align-items或justify-content可能干扰列块定位，造成视觉错位 - Safari 对
column-fill: balance的支持较弱，尤其在配合column-span: all时，建议加@supports特性检测降级
真正难处理的从来不是加一行 column-fill: balance，而是你得接受：它只对纯文本流最友好；一旦混入图片、iframe、异步加载模块，就得靠 break-inside 控制断点、用 object-fit 统一媒体尺寸，甚至退回到 Grid/Flex 分栏——因为 CSS 多列本质是为报纸排版设计的，不是为现代交互页面准备的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
