column-fill: balance 是 CSS 多列布局中控制内容均匀分配至各列的属性，默认值，使各列高度尽可能相等；仅对启用 columns、column-count 或 column-width 的块级元素生效，与 Grid 布局无关。
column-fill 不是 Grid 布局的属性，它属于 CSS 多列布局（columns）模块，和 Grid 无关。用错地方会导致样式完全不生效，这是最常见的误解起点。
column-fill: balance 是什么，用在哪
column-fill 控制多列容器中内容如何在各列间分配高度：
-
balance（默认值）：浏览器尽量让所有列高度一致，适合瀑布流视觉效果 -
auto：按文档流顺序填满第一列，再填第二列……最后一列可能明显更高
它只对设置了 columns、column-count 或 column-width 的块级元素起作用，例如：
.masonry {
columns: 3;
column-gap: 12px;
column-fill: balance; /* ✅ 有效 */
}
但如果你写了：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-fill: balance; /* ❌ 完全无效，Grid 不认这个属性 */
}
那这行就等于没写。
为什么有人误以为 column-fill 属于 Grid
因为「瀑布流」常被笼统归为“CSS 瀑布流方案”，而实际有三套互不兼容的技术路径：
- 多列布局（
columns+column-fill）：纯 CSS，兼容性好（IE10+），但不支持子项跨列、无法控制单个元素位置、排序逻辑固定（从上到下、从左到右） - Grid 模拟（
grid-auto-rows+grid-row-end）：靠预设行高 + 手动或 JS 控制跨度，不是真瀑布流，但可控性强 -
grid-template-rows: masonry：语义化真瀑布流，但仅 Chromium 116+ 原生支持，Firefox 需-moz-masonry（行为不稳定），Safari 当前（2026年4月）仍不支持
column-fill 只存在于第一条路径里，和后两者无任何交集。
实际项目中怎么选
- 如果你只要快速实现图片墙、博客列表，且能接受内容顺序不可控、不能 hover 动画错位、不需懒加载对齐，用
columns+column-fill: balance最省事 - 如果你必须保持 DOM 顺序、要 JS 动态插入新卡片、需要每张卡片精确 bottom 对齐（比如带展开面板的卡片），那就别碰
columns，直接上 JS 驱动的绝对定位或等高列分组 - 如果你在写内部工具、确定只跑 Chrome/Edge，可以试
grid-template-rows: masonry，但务必加@supports回退：
.masonry {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
<p>@supports (grid-template-rows: masonry) {
.masonry {
grid-template-rows: masonry;
}
}</p>
真正容易被忽略的一点：多列布局下，break-inside: avoid（或旧写法 column-break-inside: avoid）比 column-fill 更关键——没有它，长卡片会被硬生生切成两半跨列显示，用户一眼就能看出异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
