column-count是最快落地的响应式瀑布流方案，因纯css实现、无需js或第三方库、兼容chrome50+、firefox、safari14.1+、edge79+，且需配column-count、column-gap和break-inside: avoid三规则。
为什么 column-count 是最快落地的响应式瀑布流方案
它不用 JS、不引入第三方库、不写复杂计算逻辑，纯 CSS 即可生效，且浏览器支持已覆盖 Chrome 50+、Firefox、Safari 14.1+、Edge 79+。真正“写三行，跑全端”。
常见错误现象：子项被从中间劈开、图片溢出列宽、小屏下留白严重 —— 这些基本都源于没处理 break-inside 或忽略了图片默认行为。
-
column-count是文档流级分栏，不是栅格系统，它按内容自然填充，天生适配高度不一的卡片 - 它不依赖父容器宽度固定，配合
max-width+@media就能实现断点列数切换 - 性能极好：无 JS 计算、无重排触发、不影响首屏渲染
column-count 必须配的三个 CSS 规则
只设 column-count: 3 是不够的，缺一不可：
- 容器加
column-count和column-gap：.masonry { column-count: 3; column-gap: 1rem; } - 每个子项必须加
break-inside: avoid;（否则文字或整张卡片可能被硬截成两半） - 内部
<img>要加width: 100%; height: auto;，否则在分栏中会保持原始宽高、撑破列宽或比例失真
示例片段：
.masonry {
column-count: 3;
column-gap: 1rem;
}
.masonry > * {
break-inside: avoid;
margin-bottom: 1rem;
}
.masonry img {
width: 100%;
height: auto;
}
响应式列数切换怎么写才不翻车
别用 column-width 做响应式主控 —— 它是“建议列宽”，浏览器最终列数不可控，容易在某些尺寸下变成 2 列或 4 列，破坏设计预期。
正确做法是用 @media 显式控制 column-count：
@media (max-width: 768px) { .masonry { column-count: 2; } }@media (max-width: 480px) { .masonry { column-count: 1; } }
注意：iOS Safari 在旧版本（column-count 的 break-inside 支持不稳定，若需兼容 iOS 13 及更早，得加 -webkit-column-break-inside: avoid;
和 Flexbox 模拟瀑布流比，差在哪
Flexbox 方案（display: flex; flex-wrap: wrap; + flex: 1 0 calc(33.333% - gap)）看着像瀑布流，但本质是“等宽换行”，所有子项仍共享同一行基线 —— 高度差异大时，会出现顶部对齐、底部参差、中间大片留白。
-
column-count是垂直分栏，每列独立生长，高度由本列内容决定，视觉上才是真瀑布 - Flexbox 方案需手动算
calc()宽度，且gap在旧版 Safari 中有兼容问题；column-gap兼容性更好 - 当子项含浮动、绝对定位或 transform 时，Flexbox 容易错位；
column-count对这类元素更宽容
真正难处理的，是那些需要“跨列标题”或“首项放大”的场景 —— column-count 不支持这些，得切回 JS 方案。但只要需求是“标准多列、高度不一、纯内容流”，它就是最省心的选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
