使用CSS column-count布局不同高度图片时，如何消除行间距？

嘿，我之前也被这个问题坑过！用column-count布局不同高度的图片时，每行的高度会被该行最高的图片“撑满”，导致行与行之间出现难看的空隙。这里有几个实用的解决方案，按推荐程度排序：

1. 改用CSS Grid布局（最推荐） #

Grid布局天生就是为这种不规则的网格场景设计的，能让每个图片单元格自适应自身高度，完全避免行间隙问题。

.image-container {
  display: grid;
  /* 自动填充列，每列最小宽度200px，可根据需求调整 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0; /* 彻底消除所有间隙 */
}

.image-container img {
  width: 100%;
  height: auto;
  display: block; /* 移除图片默认的行内元素底部间隙 */
}

原理很简单：Grid会为每个图片分配独立的单元格，单元格高度由图片自身内容决定，不会被同行其他图片强制拉高，配合gap:0就能实现完全无间隙的排列。

2. 优化column-count布局（仅当必须用column时） #

如果因为某些原因必须保留column-count，可以尝试以下调整来最小化间隙：

.image-container {
  column-count: 5; /* 按需求设置每行的图片数量 */
  column-gap: 0;
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
  break-inside: avoid; /* 防止图片被拆分到不同列/行 */
  margin: 0;
  padding: 0;
}

⚠️ 注意：这个方法只能缓解问题，无法彻底解决。因为column-count本质是按列流排列，每列的高度由该列最高的图片决定，行与行之间的间隙其实是列内图片高度不一致导致的“留白”，所以如果图片高度差异很大，还是会有明显空隙。

3. JavaScript动态调整（不推荐，仅特殊场景使用） #

如果上面的CSS方案都不适用，可以用JS遍历图片，按行分组后把每行容器的高度设为该行最矮图片的高度，再通过object-fit调整其他图片的显示。不过这种方法复杂度高，还可能影响性能，除非是非常特殊的需求，否则不建议使用。

总结一下，CSS Grid是解决这个问题的最优解，它能完美适配不同高度的图片，实现无间隙的整齐排列。

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