CSS如何实现移动端双栏瀑布流布局_利用column-count或Grid

作者：袖梨 2026-07-06

移动端双栏瀑布流用column-count最简单但内容顺序是“从上到下、再换列”，视觉割裂；Grid真瀑布流需grid-auto-flow:column，但Safari兼容差；推荐column-count+JS补救顺序，兼顾兼容与可控性。

这不是你直觉里“左栏先填满、右栏再填满”的瀑布流，而是把整个容器当作文本段落来分栏：浏览器会把所有子元素按文档流顺序切片，均匀分配到各列中。这意味着第1个卡片可能在左栏顶部，第2个就在右栏顶部，第3个又回到左栏中部——对图文卡片类内容来说，视觉割裂感强。

实操建议：

必须设 column-gap 和 break-inside: avoid，否则卡片被截断：

article { column-count: 2; column-gap: 16px; }<br>article > * { break-inside: avoid; }

很多人误以为两列 Grid 就是瀑布流，结果写成 grid-template-columns: 1fr 1fr —— 这只是等宽分栏，每行固定两个子项，完全不是瀑布流效果。

真正可行的 Grid 瀑布流写法是：

立即学习“前端免费学习笔记（深入）”；

容器设 display: grid + grid-auto-flow: column，让子项按列优先顺序填入
用 grid-auto-columns 控制单列宽度（如 minmax(300px, 1fr)），并配合 grid-auto-rows: 10px（占位用，实际由内容撑开）
必须加 grid-row-end: -1 或类似 hack 让每项自动跨行，否则列内项会堆叠在第一行

但要注意：这个方案在 Safari 上有严重兼容问题，grid-auto-flow: column 在 iOS 15.4 之前几乎不可用，且无法与 gap 完美协同。

如果业务要求卡片顺序必须连贯（比如按时间倒序排列），又不想引入 Masonry 库，可以妥协处理：

用 column-count: 2 渲染，视觉上接近瀑布流
用 JS 把 DOM 节点按“列优先索引”重排一次：算出总高、预估每列应有多少项、手动移动节点位置
或者更轻量：给每个卡片加 data-index，CSS 用 :nth-child(odd)/:nth-child(even) 做基础分栏，再靠 JS 动态调整 order 值模拟瀑布流

这种混合方案在微信内置浏览器和主流 Android WebView 中表现稳定，比纯 CSS Grid 更可控。