如何用CSS实现不同高度图片的无间距多行排列？

要实现这种图片紧密堆叠、相邻图片上下完全无空隙的布局，本质上就是我们常说的瀑布流（Masonry）布局，纯CSS可以通过**多列布局（Column Layout）**轻松搞定，完全不需要JavaScript辅助。

核心思路 #

多列布局会自动把内容按指定列数垂直排列，列内的元素会紧密堆叠，自动填补不同高度元素之间的空隙——刚好匹配你要的「哪怕某行有矮图片，下方图片也直接紧贴无间距」的需求。

完整代码示例 #

<div class="image-grid">
  <img src="img1.jpg" alt="图片1">
  <img src="img2.jpg" alt="图片2">
  <img src="img3.jpg" alt="图片3">
  <img src="img4.jpg" alt="图片4">
  <!-- 可添加更多图片 -->
</div>

.image-grid {
  /* 设置列数，可根据需求调整；也可以写`columns: 200px`让浏览器自动按最小宽度分栏 */
  columns: 3;
  /* 移除列与列之间的间距 */
  column-gap: 0;
  /* 可选：给容器加最大宽度，避免屏幕过宽时列数过多 */
  max-width: 1200px;
  margin: 0 auto;
}

.image-grid img {
  /* 关键：防止单个图片被拆分到两个列中，保证图片完整 */
  break-inside: avoid;
  /* 图片宽度占满所在列 */
  width: 100%;
  height: auto;
  /* 移除图片默认的行内元素空隙（比如底部的几像素留白） */
  display: block;
  /* 确保上下图片无间距，设为0即可 */
  margin-bottom: 0;
}

关键细节补充 #

1. 响应式适配：如果需要在不同屏幕尺寸下调整列数，配合媒体查询即可：

@media (max-width: 768px) {
  .image-grid {
    columns: 2;
  }
}

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

2. 关于图片默认空隙：图片默认是行内元素，底部会有几像素的留白，display: block可以彻底消除这个问题，保证上下图片完全贴合。

为什么不推荐纯CSS Grid？ #

Grid布局本身无法直接获取图片的高度来计算行跨度，要实现紧密堆叠必须配合JavaScript给每个图片设置高度变量——不符合你「仅用CSS实现」的要求，所以多列布局是当前最优解。

内容的提问来源于stack exchange，提问作者S K