column-count 是最轻量、兼容性最好的纯 css 瀑布流方案，但它只是多栏流而非真瀑布流，适合宽高不一但结构简单的卡片布局，无法自动回填列间空隙，需配合 break-inside: avoid 和 column-width 实现响应式与防截断。
column-count 是最轻量、兼容性最好的纯 CSS 瀑布流方案，但它不是“真瀑布流”，而是多栏流——适合照片墙这类宽高不一但结构简单的卡片布局，前提是别指望它自动把短图塞进前面列的空隙里。
为什么 column-count 比 flex 或 grid 更靠谱？
很多人一试 display: flex + flex-wrap: wrap，结果发现图片是“从左到右、逐行填满”，根本不是“按列落下”的瀑布效果。这是因为 flex 主轴默认是行方向；而 grid 即使设了 grid-auto-flow: dense，也得靠每个项手动指定 grid-row 起始位置才能逼近效果，否则所有图片全挤在第一行——这一步仍需 JS 计算原始比例换算出行数。
column-count 的优势在于：它原生模拟文档流切分，浏览器自动按内容长度把卡片“顺次切片”分到各列，视觉上就是列优先的瀑布感，零 JS、无重排、SEO 友好。
- 不依赖 JS 就能响应式生效（配合
column-width） - 支持 IE10+ 和所有现代浏览器
- 语义清晰：卡片仍是正常流内块级元素，无障碍可读
- 缺点也很明确：无法控制列高均衡，也不能让后插入的短图“回填”前面列的空白
break-inside: avoid 必须加，且 Firefox 还要额外写 page-break-inside: avoid
如果不加这个，浏览器会把单张图片或卡片直接截断——比如一张高图被切成两半，一半在第一列底部，一半跑到第二列顶部，完全破坏视觉连贯性。
关键点：
- 必须作用在每个卡片（如
.card或.image-item）上，不能只写在容器上 -
break-inside: avoid在 Chrome/Safari/Edge 有效；Firefox 需要同时写page-break-inside: avoid才能生效 - 卡片不能用
position: absolute、transform或负 margin，否则脱离文档流，break-inside失效 - 卡片本身要是块级元素（
div默认满足），且不要设固定height，否则可能撑乱列高
用 column-width 实现真正响应式，别硬写 column-count 媒体查询
写一堆 @media (max-width: 768px) { column-count: 2 } 很容易翻车：不同设备宽度临界点难对齐，小屏下可能突然只剩一列但列宽还很窄，图片被压扁；大屏列数又不够。
更鲁棒的做法是：
- 只设
column-width: 300px（表示“每列最小宽度为 300px”） - 搭配
column-gap: 1rem控制间距 - 容器自身要有
max-width或width限制，否则超宽时列数爆炸 - 浏览器会根据容器实际宽度自动算出列数：宽 ≥ 600px → 至少 2 列；≥ 900px → 至少 3 列；窄屏下自动退化为单列
- 注意：
column-width和column-count同时存在时，前者优先级更高，后者会被忽略
图片加载未完成时留白错位？必须预留占位空间
图片异步加载，初始高度为 0，导致后续卡片全部上移，等图片加载完才“啪”一下往下掉——这是最常见的抖动问题。
解决办法只有两个：
- 服务端预传宽高，在 HTML 里写
<img style="max-width:90%" style="max-width:90%">，然后 CSS 设width: 100%; height: auto，浏览器就能提前计算占位 - 前端用
aspect-ratio: 3 / 2（现代浏览器支持），例如.image-item img { aspect-ratio: attr(width) / attr(height); }配合 HTML 属性，或直接写死常见比例 - 千万别只靠
img { width: 100%; height: auto; }——没宽高信息时，height: auto 就是 0 - 如果用懒加载，
loading="lazy"本身不解决占位问题，必须配合上述任一方案
column-count 方案本质是妥协：它快、稳、语义干净，但列高不均和加载抖动是硬伤，而这恰恰是照片墙最常暴露的问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
