纯css无法实现真瀑布流，column-count/column-width是唯一原生方案但存在卡片劈裂、高度不均等问题；需用break-inside: avoid、阶梯媒体查询、aspect-ratio等技巧优化，grid非替代方案，js仍是严格对齐的唯一解。
纯 CSS 实现不了“视觉对齐、高度均衡”的真瀑布流，column-count 和 column-width 是目前唯一原生支持内容流式分列的方案，但必须接受它不控制高度、不回溯重排、卡片可能错位的现实。
为什么 column-count 容易劈开卡片？
浏览器把容器当作文本流处理，column-count: 3 只是告诉它“切成三列”，并不保证每个 .card 是原子单位。标题在第一列、图片掉到第二列，就是典型表现。
- 必须给卡片加
break-inside: avoid（Chrome/Firefox 稳定；Safari 15.4+ 才可靠） - 旧版 Safari 需补
-webkit-column-break-inside: avoid - 别在卡片上设
margin-bottom，它会被算进列高，导致末尾留白错位 -
display: inline-block或float会直接破坏列流，禁用
column-width 总是右边留白，怎么对齐？
浏览器先按 column-width 算理想列宽，再根据容器宽度反推整数列数，所以必然有剩余空间——这不是你写错了，是机制决定的。
- 用相对单位：比如
column-width: 18rem，比px更适应字体缩放 - 显式设
column-gap: 1.5rem，别依赖默认值 - 容器左右
padding设为column-gap / 2，让首尾卡片边缘对齐视口 - 绝对不要同时设
column-count和column-width，后者会被忽略
移动端列数突然崩了，怎么稳住？
小屏下 column-width: 300px 超过容器宽度，浏览器只能退成 1 列；更麻烦的是某些安卓 WebView 对 1px 差异敏感，列数会跳变。
- 用阶梯式媒体查询，从窄往宽加列：
@media (min-width: 480px) { column-count: 1; }→768px: 2→1024px: 3 - 每档只改
column-count和column-gap，别碰width或max-width - 测试重点不是 DevTools 模拟尺寸，而是真机上的 Chrome Android 和 Safari iOS 渲染结果
- 如果列高差异太大，加
min-height: 200px收敛卡片底线，比硬拉高更可控
要不要换 grid？
Grid 不是瀑布流替代方案，它是等宽网格。所谓 “Grid 瀑布流” 其实是靠 grid-auto-flow: dense + minmax() 做的伪排列，列高依然不联动，只是视觉上更整齐些。
- 适合卡片高度波动小、结构统一的场景（如商品卡）
- 别信
grid-template-rows: masonry，Safari/Firefox 目前都不支持，@supports检测永远失败 - 真要严格对齐列底或动态插入新卡片，JS 方案（如 Masonry.js 或 ResizeObserver + 手动定位）仍是唯一解
最常被忽略的一点：多列布局里 break-inside: avoid 对图片懒加载无效——图片还没加载完时高度为 0，卡片仍可能被劈开。得等 load 事件后再触发重排，或用 aspect-ratio + object-fit 锁定占位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
