多列高度不一致不是 bug，而是 column-fill: auto 的默认行为；要实现等高需用 column-fill: balance 并配合 max-height，或改用 Flex/Grid 布局，且须注意浏览器兼容性与内容类型限制。
多列高度不一致不是 bug，是 column-fill: auto 的默认行为——它根本没打算平衡高度。真要等高，得换思路，不能只靠 column 属性硬扛。
column-fill: balance 必须配 height 或 max-height 才生效
很多人加了 column-fill: balance 却没效果，是因为漏掉了关键前提：容器必须有明确的块级高度约束。
-
height: auto、height: unset或没设高度 →column-fill: balance完全被忽略，退化为auto - 推荐用
max-height而非固定height：内容少时自动收缩，内容多时触发滚动，更健壮 - 若用
height，需预估内容量；过小会导致底部内容不可见（overflow: visible默认裁剪）
Flex/Grid 比 CSS Columns 更可控，尤其混入非文本元素时
一旦列里有图片、<pre class="brush:php;toolbar:false;"></pre>、iframe 或设置了 break-inside: avoid 的区块，column-fill: balance 就容易失效——它本质是文本流切片算法，不是布局引擎。
- 纯文字场景下
columns+balance可行；但真实项目中，优先考虑display: flex或display: grid -
flex下子项默认align-items: stretch，天然等高；grid用grid-template-rows: 1fr也能强制拉齐 - 注意：表格元素（
<table>）本身不响应 <code>height: 100%，必须用外层容器包裹并控制高度Safari 和旧版浏览器对 column-fill 支持弱，别裸奔
在 Safari（尤其配合
column-span: all时）或 iOS WebKit 中，column-fill: balance表现不稳定，首次渲染可能错位，重绘后才“跳”正。立即学习“前端免费学习笔记（深入）”；
- 务必加
@supports (column-fill: balance)做特性检测，降级回column-fill: auto或 Flex - Web Font 加载延迟会影响高度计算，导致闪动；可配合
font-display: optional或服务端内联关键字体 - 避免在
display: flex或display: grid容器里嵌套多列布局，父级的align-items可能干扰列块定位
真正麻烦的从来不是写那一行
column-fill: balance，而是你得接受：它只对干净的段落流负责；只要页面里有一张没设object-fit的图、一个没加break-inside: avoid的卡片，平衡就大概率崩掉。 - 务必加
