如何填充CSS Grid布局中跨列元素产生的空白空间？

要解决跨列网格项留下的空白问题，你可以借助CSS Grid的grid-auto-flow: dense属性让网格自动填充空白区域，同时简化冗余的跨列写法。

核心修改点： #

• 给网格容器添加grid-auto-flow: dense，开启密集布局模式，网格会自动寻找并填充之前的空白空间
• 将第三个网格项的跨列代码简化为grid-column: span 2（原grid-column-start: span 2; grid-column-end: span 3;属于重复定义，span 2已明确表示跨2列）

修改后的完整代码： #

CSS代码：

.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: span 2; /* 简化跨列写法 */
}

HTML代码：

<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>

效果说明： #

开启grid-auto-flow: dense后，网格布局引擎会调整后续网格项的放置顺序，将第四个网格项自动填充到第三个项左侧的空白位置，实现视觉平衡的布局效果。

内容的提问来源于stack exchange，提问作者MD Hasan Patwary