纯css实现瀑布流商品展示的关键在于方案选择与避坑：①column-count兼容性好但需break-inside:avoid防劈裂、aspect-ratio防闪跳、js预处理数据顺序；②grid推荐现代项目，用repeat(auto-fill,minmax())+grid-auto-flow:row确保稳定，safari需回退；③禁用flexbox因一维局限易致“长短腿”。
纯 CSS 就能实现瀑布流商品展示，但直接套用 column-count 或 grid 很容易出视觉错位、闪跳、Safari 崩溃或列高不齐的问题。关键不在“能不能写”，而在“怎么选方案 + 怎么避坑”。
用 column-count 实现最简瀑布流（适合静态图+兼容优先）
这是兼容性最好、零 JS 的方案，IE10+、所有移动端都支持，但仅适用于内容加载稳定、不需要严格底部对齐的场景。
- 必须给每个
.item加break-inside: avoid，否则卡片可能被硬生生劈开（比如标题在第一列，图片掉到第二列） - 图片加载前高度为 0，会导致后续内容提前“掉列”，等图加载完重排 → 肉眼可见闪跳。解决方法：用
aspect-ratio: 4/3或伪元素 padding-bottom 固定容器宽高比 - 列顺序是“从上到下、从左到右”切分，所以默认是左列 1→2→3，右列 4→5→6。如果希望更符合浏览逻辑（如左列 1→3→5），需 JS 预处理数据顺序，不能靠 CSS 改变流式填充方向
- 别用
margin控制 item 间距，要用column-gap；gap在 column 布局里无效
用 display: grid 实现响应式瀑布流（推荐现代项目）
主流浏览器（Chrome/Firefox/Edge）已稳定支持 grid-auto-flow: row + auto-fill，视觉自然、列数随屏自适应，但 Safari（尤其 iOS 16.4 之前）不支持 grid-auto-flow: column，强行用会错行或重叠。
- 安全写法：
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))+grid-auto-flow: row。它靠内容自身高度形成“视觉瀑布”，不强制列底对齐，但极其稳定 - 真要列底严格对齐（如电商商品卡要求底部平齐），必须用
grid-auto-flow: column，但得包裹在@supports (grid-auto-flow: column)里，并给 Safari 提供column-count回退 - 子项上禁用
margin—— Grid 会把它算进尺寸，导致列数意外减少；统一用gap控制间距 - 别手动设
grid-row: span X来模拟高度，除非你用 JS 动态计算并注入跨行数（见 Masonry 模式）
为什么不用 Flexbox 做瀑布流？
Flexbox 本质是一维布局，强行做多列瀑布流只能靠 JS 计算最短列再 append，或用 flex-wrap + align-content: flex-start 模拟，但结果极不可控：
- 列高差异大时，会出现一列堆满、另一列空半截的“长短腿”现象
-
flex-direction: column+flex-wrap在多数浏览器中不生效，属于未定义行为 - 没有原生列概念，无法响应式调整列数，断点切换时极易错乱
- 即便用 JS 补救，resize 和图片加载完成事件监听稍有遗漏，整个布局就塌掉
图片加载闪跳和响应式切换的致命细节
这两个问题在真实项目中高频出现，但文档几乎不提：
- 所有基于
column-count的方案，只要图片是异步加载（loading="lazy"或网络慢），就一定会闪跳。唯一可靠解法：用aspect-ratio（Chrome 88+/Firefox 89+）或旧式 padding-bottom 技巧锁死容器比例 - 在媒体查询中切换布局模式（比如
max-width: 768px用 column，min-width: 769px用 grid），必须确保两套 CSS 规则不互相覆盖 height、min-height 或 position，否则 resize 瞬间会触发 layout thrashing - 服务端渲染（SSR）页面首次加载时，若 grid 容器无显式
min-height或内容占位，可能造成 FOUC（Flash of Unstyled Content）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
