如何用CSS Grid实现Pinterest式不等高3列多行链接网格？

之前手动拆分3个div列的方式，会在响应式场景下导致内容顺序混乱，推荐用以下纯CSS方案解决——无需手动分列，自动实现瀑布流布局且响应式顺序完全符合预期：

方案1：CSS Grid Masonry（现代浏览器优先） #

这是目前最简洁的纯CSS方案，浏览器自动处理瀑布流布局，内容顺序自然连贯。

HTML结构 #

所有卡片直接放在一个容器里，不需要手动拆分列：

<div class="grid-container">
  <a href="#" class="grid-card">
    <img src="你的图片地址" alt="图片描述">
    <p>卡片文字内容</p>
  </a>
  <a href="#" class="grid-card">
    <img src="你的图片地址" alt="图片描述">
    <p>卡片文字内容</p>
  </a>
  <!-- 按需添加更多卡片 -->
</div>

CSS样式 #

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 默认3列布局 */
  grid-auto-flow: dense; /* 自动填充空白区域，实现紧凑瀑布流效果 */
  grid-gap: 16px; /* 卡片之间的间距 */
  padding: 16px;
}

.grid-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.grid-card img {
  width: 100%;
  height: auto; /* 保持图片原始比例 */
  display: block;
  border-radius: 8px; /* 可选：给图片添加圆角 */
}

.grid-card p {
  margin: 8px 0 0;
  font-size: 14px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr); /* 平板端切换为2列 */
  }
}

@media (max-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr; /* 手机端切换为1列 */
  }
}

方案2：CSS Columns（兼容旧浏览器） #

如果需要适配不支持Grid Masonry的旧浏览器，用CSS列布局也能实现目标效果：

HTML结构 #

和方案1一致，无需手动分列：

<div class="columns-container">
  <a href="#" class="column-card">
    <img src="你的图片地址" alt="图片描述">
    <p>卡片文字内容</p>
  </a>
  <!-- 更多卡片 -->
</div>

CSS样式 #

.columns-container {
  columns: 3; /* 默认3列 */
  column-gap: 16px;
  padding: 16px;
}

.column-card {
  display: block;
  text-decoration: none;
  color: inherit;
  margin-bottom: 16px; /* 卡片垂直间距 */
  break-inside: avoid; /* 关键：防止卡片被拆分到两列中 */
}

.column-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.column-card p {
  margin: 8px 0 0;
  font-size: 14px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .columns-container {
    columns: 2;
  }
}

@media (max-width: 480px) {
  .columns-container {
    columns: 1;
  }
}

为什么手动分列会出问题？ #

手动创建3个div列并分配内容，响应式切换列数时，内容会按「第一列全部内容→第二列全部内容→第三列全部内容」的顺序展示，不符合正常的从上到下、从左到右的浏览逻辑。上面两种方案都是让浏览器自动分配内容，内容顺序连续，响应式切换时不会出现错乱。

内容的提问来源于stack exchange，提问作者VL Design