grid-column 无法实现瀑布流，因其仅控制元素跨列宽度，不参与按高度动态分配的列平衡；真正瀑布流需 column-count + break-inside 或 js masonry 方案。
grid-column 在移动端瀑布流中无法实现“跨列”意义上的视觉瀑布效果——它只是 Grid 布局里控制单个子项横跨几列的声明，和传统理解的“瀑布流”（即按高度自动填充最短列）完全不是一回事。
为什么 grid-column 不能用来做瀑布流
Grid 是二维布局系统，grid-column 只决定一个元素在列轴上占几格，不参与“哪一列更短、该往哪塞”的动态分配逻辑。你写 grid-column: span 2，它就老老实实横跨两列，但不会因此让其他元素去“绕开它往下填”，更不会自动找高度最小的列插入下一个 item。
- 瀑布流的本质是“高度驱动的列平衡”，CSS Grid 没有内置这种算法
-
grid-column属于显式定位，必须手动指定起止线或 span 数，无法响应内容高度变化 - 在移动端，用
grid-column+grid-template-columns: repeat(auto-fill, minmax(...))只能实现等高网格，不是瀑布流 - 若强行用
grid-column模拟瀑布（比如给每个 item 手动算列号），维护成本爆炸，且横屏旋转时列数重算无解
移动端真能用的瀑布流方案只有两个方向
要么接受 CSS 多列的语义限制，要么用 JS 补足逻辑：
-
column-count+break-inside: avoid：唯一纯 CSS、可打印、无障碍友好的方案，但必须设显式height或max-height，且列数固定或靠column-width+resize监听切换 - JS 驱动的 Masonry（如
masonry-layoutpolyfill 或react-masonry-component2）：能真正按高度排序插入，支持动态列数、图片懒加载、横屏自适应，但增加 bundle 体积和首屏渲染延迟 - 别碰
display: flex套多层flex-direction: column：Flex 容器在多列上下文中分列行为不可控，iOS Safari 下常出现错位或截断
grid-column 在瀑布流场景里唯一靠谱的用途
它只适合做“局部强调”——比如瀑布流列表中某张 banner 卡片需要横跨全部列宽：
.waterfall-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
<p>.waterfall-item.featured {
grid-column: 1 / -1; /<em> 横跨所有列 </em>/
}</p><p>.waterfall-item:not(.featured) {
/<em> 正常按 grid 自动排列，仍是等高网格，不是瀑布流 </em>/
}</p>
- 这本质上是在 Grid 网格里“插播一条通栏广告”，不是实现瀑布流本身
- 必须配合
grid-template-columns显式定义列数，auto-fill或auto-fit会导致grid-column: 1 / -1失效 - 如果容器宽度变化频繁（如横竖屏切换），需用
matchMedia重设grid-template-columns，否则通栏会错位
真正想做瀑布流，就别在 grid-column 上耗时间。它解决不了高度排序问题，也扛不住移动端 resize 和懒加载的组合拳——该用 column-count 就老老实实加 break-inside 和 IntersectionObserver，该上 JS 就直接选成熟库。最容易被忽略的是：横屏时 column-count 不会自动重算，而 grid-column 的通栏写法在 minmax() 动态列下根本不可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
