columns才是真瀑布流，因其原生支持按内容自适应分列且不依赖DOM顺序；grid当前无法实现真正的瀑布流，主流方案实为JS补位的伪解法。
纯 CSS 实现瀑布流，columns 是最轻量、最接近“原生瀑布流语义”的方案；grid 本身不支持真正的瀑布流（即各列高度不等、内容自动填满最短列），强行模拟会丢失语义、破坏可访问性，且在动态内容或 resize 场景下容易错位。
为什么 columns 才是真瀑布流
columns 是 CSS 多列布局模块专为文本流设计的属性，浏览器原生按内容长度切分、按列高自适应填充，天然具备瀑布流行为。它不要求 DOM 顺序与视觉顺序一致，也不依赖固定项高——这点对动态卡片、异步加载图片尤其关键。
常见错误是误用 column-count 却忽略 column-gap 和 break-inside: avoid，导致卡片被硬截断：
- 必须加
break-inside: avoid到子项上，否则长卡片会被劈成两半跨列显示 -
column-gap推荐用rem或px，避免用百分比（某些浏览器解析不稳定） - 容器需设
column-fill: auto（默认值，但显式声明更稳妥）
.masonry {
columns: 3;
column-gap: 1.5rem;
}
.masonry > * {
break-inside: avoid;
}
为什么 grid 模拟瀑布流是伪解法
CSS Grid 的 grid-template-rows: masonry 还在实验阶段（仅 Chrome 117+ 启用 display: grid + grid-template-rows: masonry，且需 grid-auto-flow: dense 配合），绝大多数项目无法用。当前主流“Grid 瀑布流”实为“多列等高网格 + JS 补位”，本质是 hack：
- 用
grid-template-columns: repeat(3, 1fr)创建三列，但每行强制填满三格 → 实际是“垂直滚动的网格”，不是瀑布流 - 若想视觉上近似瀑布流，得靠 JS 计算每列当前高度、插入到最短列——这已脱离纯 CSS 范畴
- Grid 方案对屏幕缩放、字体加载完成前的 reflow 更敏感，常出现短暂错位或重排
真正能用的 Grid 瀑布流写法目前仅限：
.masonry-grid {
display: grid;
grid-template-rows: masonry; /* 仅 Chromium 基线支持 */
grid-auto-flow: dense;
}
响应式与兼容性取舍点
columns 在 Safari 14.1+、Firefox 91+、Chrome 102+ 均稳定支持，iOS Safari 15.4+ 也 OK；最大短板是无法精确控制单列宽度（只能用 column-width + column-count 组合，浏览器自行权衡），所以移动端适配建议：
- 小屏用
columns: 1，中屏columns: 2，大屏columns: 3，用媒体查询切换 - 避免同时设置
column-width和column-count，优先用column-count控制列数，让宽度自适应容器 - 若需等宽卡片且强依赖 Grid 语义（如配合
:nth-child样式），宁可用 Flex + JS 分列，也不要硬套 Grid 瀑布流
真正需要纯 CSS 瀑布流时，columns 是唯一可靠路径；所有号称“Grid 原生瀑布流”的文章，要么基于未落地的草案，要么悄悄混入了 JS 逻辑。别被 demo 里的静态截图骗了——试试在卡片里加个懒加载图片，或者拖动窗口缩放，差别立刻出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
