CSS瀑布流布局教程 🌊

瀑布流布局（Waterfall Layout）是一种常见的网页排版方式，常用于图片墙、文章展示等场景。以下是实现方法与技巧：

实现方法

1. CSS Grid 网格布局
   使用 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) 实现自适应列数

   

2. Flexbox 弹性盒子
   通过 flex-wrap: wrap 和 flex-basis 控制元素分布

   

3. 纯CSS技巧
   利用 float 或 column-count 实现基础瀑布流效果

   

代码示例

/* CSS Grid 示例 */
.waterfall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

注意事项

• ⚠️ 确保容器高度足够以避免内容溢出
• 使用 object-fit: cover 保持图片比例
• 浏览器兼容性需测试（如IE不支持Grid）

扩展阅读

想了解更多关于CSS Grid的高级用法？可以查看 /css_grid_layout 课程。