CSSGrid打造瀑布流布局教程

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《CSS Grid实现瀑布流布局教程》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

使用CSS Grid模拟瀑布流可通过grid-template-columns分多列，结合grid-auto-rows和grid-row-end控制行跨度，配合JS动态计算高度实现兼容性好的布局效果。

实现瀑布流布局，使用 CSS Grid 是一种简洁高效的方式。虽然传统瀑布流常借助 JavaScript 或第三方库（如 Masonry），但现代 CSS Grid 配合 grid-template-rows: masonry 可以原生支持，不过目前浏览器支持有限。现阶段更稳定且广泛兼容的方法是通过 Grid 的列布局模拟瀑布流效果。

使用 CSS Grid 模拟瀑布流（兼容性好）

核心思路是将容器划分为多列，让子项自动在各列中按高度堆叠，形成错落有致的视觉效果。

关键步骤：

• 设置父容器为 display: grid
• 使用 grid-template-columns 定义多列（如 3 列）
• 设置 grid-auto-rows 为一个较小的基准行高（如 1px）
• 启用 grid-auto-flow: dense 让空隙被填充
• 每个子项通过 grid-row-end 占据与其内容高度成比例的行数

示例代码：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1px;
  gap: 10px;
  grid-auto-flow: dense;
}
.item {
grid-row-end: span 10; / 假设高度对应 10 行 /
}
.item.tall {
grid-row-end: span 20; / 更高的项目占更多行 /
}

说明：通过 JS 动态计算每个项目的高度，并设置对应的 grid-row-end: span N，可以实现真正自适应的瀑布流。

使用 masonry 布局（实验性）

CSS 新增了对 masonry 布局的支持，语法更直观，但目前仅部分浏览器（如 Firefox Nightly）支持。

示例：

.container {
  display: grid;
  grid-template-rows: masonry;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

只需这一段 CSS，子元素会自动在列中垂直堆叠，无需手动计算行数。但因兼容性问题，生产环境暂不推荐。

配合 JavaScript 实现动态瀑布流

为了兼容性和灵活性，通常结合 JS 计算每列当前高度，将下一项插入最短列。

基本逻辑：

• 初始化每列高度数组
• 遍历每个子项，找到最短列
• 将该项定位到该列，更新列高
• 使用 position: absolute 或 CSS Transform 定位

虽然这不是纯 CSS 方案，但能完美控制布局，适合图片墙等场景。

基本上就这些。用 Grid 模拟瀑布流，关键是利用 grid-auto-rows + grid-row-end 控制占据行数，再配合 JS 动态赋值，就能实现流畅的视觉效果。masonry 模式未来可期，但现在还需耐心等待。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSSGrid打造瀑布流布局教程》文章吧，也可关注golang学习网公众号了解相关技术文章。