已知卡片高度或宽高比时如何实现纯CSS的Masonry瀑布流布局

已知卡片高度或宽高比的场景下，有两种主流纯CSS实现方案，无需引入JS即可完成瀑布流效果：

方案1：CSS Column 多列布局（兼容性最优） #

该方案兼容IE10及以上所有浏览器，代码量极低，适合对兼容要求高的场景。
实现逻辑：

• 父容器通过column-count指定列数，column-gap控制列与列的横向间距
• 子卡片设置break-inside: avoid避免被列截断，配合margin-bottom控制卡片纵向间距
• 已知卡片宽高比时可以直接用aspect-ratio固定比例，已知固定高度直接设置height即可

代码示例：

/* 瀑布流容器 */
.masonry-container {
  column-count: 4; /* 可配合媒体查询调整不同屏幕下的列数 */
  column-gap: 16px;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}

/* 瀑布流卡片 */
.masonry-card {
  break-inside: avoid;
  margin-bottom: 16px;
  /* 已知宽高比为3:4时直接写 */
  aspect-ratio: 3/4;
  /* 已知固定高度时替换为：height: 300px; */
}

注意：该方案的元素排序逻辑是「先从上到下填充满第一列，再填第二列」，如果需要「从左到右按行排序」的逻辑，选择第二种方案。

方案2：CSS Grid 原生Masonry布局（现代浏览器首选） #

该方案是W3C官方推出的瀑布流标准特性，Chrome 110+、Firefox 107+、Safari 17+均已支持，符合常规列表的行优先排序逻辑。
实现逻辑：

• 父容器开启Grid布局，用grid-template-columns定义列宽规则
• 核心属性grid-template-rows: masonry开启自动瀑布流排版，浏览器会自动计算每个卡片的纵向位置
• 用gap统一控制行列间距

代码示例：

/* 瀑布流容器 */
.masonry-container {
  display: grid;
  /* 响应式列规则：自动填充列，每列最小宽度250px，最大占满剩余空间 */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-template-rows: masonry;
  gap: 16px;
  padding: 16px;
}

/* 瀑布流卡片 */
.masonry-card {
  /* 直接设置对应高度或宽高比即可 */
  aspect-ratio: var(--card-custom-aspect-ratio);
}

旧浏览器固定宽高比兼容方案 #

如果需要兼容不支持aspect-ratio的旧浏览器，可以用padding百分比法模拟固定宽高比，以3:4的宽高比为例：

.masonry-card {
  position: relative;
}
.masonry-card::before {
  content: "";
  display: block;
  /* 高度/宽度 * 100% = 4/3 * 100% = 133.33% */
  padding-top: 133.33%;
}
.masonry-card .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

内容的提问来源于stack exchange，提问作者Don P