如何填充CSS网格中的空白？

Question

我正在使用 CSS Grid 创建响应式网格布局，其中网格容器中显示了一系列网格项。我使用

grid-template-columns: repeat(3, minmax(100px, 1fr));

根据可用空间自动调整列数。此外，我有一个特定的网格项（第三个），它使用

grid-column-start: span 2;

和

grid-column-end: span 3;

跨越多个列。

但是，在布局中，第三个网格项在其跨越的网格中留下了空白空间。我想用内容或其他网格项填充这个空白空间。如何使用 CSS 网格实现此目的？

这是我的 HTML 和 CSS 的简化版本：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  grid-gap: 20px;
}

.grid-item {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
}

.grid-item:nth-child(3) {
  grid-column-start: span 2;
  grid-column-end: span 3;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
</div>

我尝试调整网格布局的 CSS 属性，例如 grid-auto-columns，看看它们是否会自动填充第三个网格项创建的空白空间。然而，这些属性并没有达到预期的结果。

我的期望是在 CSS 网格本身中找到一个解决方案，该解决方案可以用内容或附加网格项动态填充空白空间，确保视觉上平衡的布局。喜欢这张图：

Answer 1

添加

grid-auto-flow: dense

如果较小的项目稍后出现，“密集”打包算法会尝试先填充网格中的空洞。这可能会导致项目出现无序，这样做会填补较大项目留下的漏洞。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  grid-gap: 20px;
  grid-auto-flow: dense;
}

.grid-item {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
}

.grid-item:nth-child(3) {
  grid-column-start: span 2;
  grid-column-end: span 3;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
</div>