column-fill在Grid布局中完全不起作用，因为它是多列布局（CSS Columns）专属属性，与Grid布局模型无关；一旦使用display: grid，浏览器即进入Grid计算逻辑，所有多列相关属性（如column-fill、column-gap等）均被忽略。
为什么 column-fill 在 Grid 布局里完全不起作用
column-fill 是多列布局（columns / column-count）的属性，和 CSS Grid 毫无关系。一旦你用了 display: grid，浏览器就进入 Grid 布局模型，此时 column-fill、column-gap（多列版）、break-inside 等多列专属属性全部被忽略——不是“不生效”，是压根不进计算逻辑。
常见错误现象：grid-template-columns: repeat(3, 1fr) 配上 column-fill: balance，结果毫无反应，子项还是按 DOM 顺序从左到右、从上到下填满网格单元格。
真正起作用的只有 Grid 自身的流控机制：grid-auto-flow: dense 可以让小项“插空”，但无法实现 Pinterest 那种按列高度动态分配的瀑布流效果。
Grid 本身无法原生实现 Pinterest 式瀑布流
Pinterest 布局的核心特征是：内容按列排列，每列独立积累高度，新元素总是插入当前最短列。这要求布局引擎能实时测量各列高度并做决策——而 Grid 的列宽/行高在布局开始前就已确定（即使使用 auto 或 minmax()），它不支持“逐项插入 + 动态列高重排”。
立即学习“前端免费学习笔记（深入）”；
所以如果你坚持用纯 CSS Grid：
- 只能模拟静态瀑布流：用
grid-template-rows预设足够多的行，靠grid-row-start手动指定每个 item 落在哪一列哪一行——维护成本爆炸，且响应式下彻底失效 - 或改用
grid-auto-flow: column+ 固定行高（如grid-auto-rows: 200px），但这只是“竖向平铺”，不是真正的高度自适应瀑布流 - 所有尝试通过
align-items、justify-content或place-items“骗出”列平衡的行为，都会失败
真正可行的方案：CSS Columns + break-inside: avoid
Pinterest 布局的 CSS 实现，唯一可靠路径是回归多列布局（columns），它天生支持按列填充和高度平衡：
.pinterest {
columns: 3;
column-gap: 16px;
}
.pinterest > * {
break-inside: avoid;
margin-bottom: 16px;
}关键点：
-
columns: 3等价于column-count: 3，浏览器会自动创建三列并尽量平衡高度 -
break-inside: avoid防止单个卡片被断开跨列显示（否则图文会被切开） - 不需要
column-fill—— 它默认就是balance，显式写上也仅对column-fill: auto有区别 - 响应式只需改
columns值，比如@media (max-width: 768px) { columns: 2; }
兼容性注意：Edge 16+、Chrome 50+、Firefox 52+、Safari 10.1+ 都支持；iOS Safari 10.3+ 起稳定。IE 完全不支持，需降级为 JS 方案。
什么时候该放弃 CSS，直接上 JS
当你的卡片高度差异极大（比如混排视频、长图、文字块），或者需要支持懒加载、动画插入、排序过滤时，纯 CSS Columns 会出现明显不平衡（尤其首屏）——因为它是基于内容流的静态分列，不感知 DOM 变化。
此时推荐轻量 JS 方案：
- 用
Masonry库（https://www.php.cn/link/bb997d580d9b9d97167966b8591917fb），专注解决瀑布流，API 简洁，支持 resize 和添加项 - 或手写逻辑：维护一个长度为 N 的数组记录各列当前高度，每次插入前找最小值索引，设置
position: absolute+top/left（需父容器position: relative） - 避免用
display: grid+JavaScript模拟列高——既失去 Grid 优势，又没解决核心问题，还增加重排开销
复杂点在于：CSS Columns 的平衡算法不可控，JS 方案要处理 resize、滚动锚定、SSR 同构等细节。多数项目里，先用 columns + break-inside 覆盖 90% 场景，再按需补 JS，比一开始就强推 Grid“伪瀑布流”更务实。
