如何用CSS Grid实现不同尺寸元素紧凑排布并填补空白

首先明确：CSS Grid无法直接实现你想要的效果，原因在于CSS Grid的行轨道高度是统一的——当某一行内存在一个高元素时，整行的轨道高度会被该元素拉高，该行内所有单元格的高度都会等于这个轨道高度。单元格内元素与单元格顶部/底部的空白是元素本身的布局空间，不属于网格的空白轨道，因此grid-auto-flow: dense无法填充这类空白（它只能填充未被元素占用的轨道单元格）。

针对你的需求，这里提供两种可行的解决方案：

方案一：使用CSS多列布局（推荐） #

CSS多列布局天然支持类似瀑布流的排列，元素会自动填充列中的空白区域，完全适配内容动态变化的场景。

修改后的代码示例：

.container {
  columns: 3; /* 设置3列 */
  column-gap: 1rem; /* 列之间的间距 */
  width: 800px;
}

/* OTHER STYLES */

body {
  background-color: #3b404e;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  height: 100px;
  background-color: #1EAAFC;
  background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  color: #fff;
  border-radius: 4px;
  border: 6px solid #171717;
  break-inside: avoid; /* 防止元素被拆分到两列中 */
  margin-bottom: 1rem; /* 垂直方向的元素间距 */
}

.item1 {
  height: 250px;
}

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
</div>

方案二：JavaScript动态布局 #

如果必须保留Grid相关特性，可以通过JavaScript动态计算每个元素的位置，将短元素插入到高元素下方的空白轨道中。不过这种方案需要监听内容变化并重新计算，复杂度较高，适合有特殊Grid布局需求的场景。

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