如何实现包含跨2列元素的CSS Grid布局自动填充空白空间

嘿，这个问题我之前做项目的时候也踩过坑！默认的CSS Grid是严格按照DOM里元素的顺序来排列的，当你有个跨列元素（就是你那个绿色的）占了整行后，后面的元素只会老老实实排到下一行，根本不会去管前面第一行空出来的那个格子。不过别担心，只要加一行CSS就能搞定——grid-auto-flow: dense！

这个属性的作用就是告诉Grid布局算法，别死磕元素的原始顺序，只要前面有空白的单元格，就把后面能塞进去的元素填进去，完美解决你要的“补空白”需求。

下面是调整后的完整代码：

CSS 代码 #

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100px;
  grid-gap: 1rem;
  /* 关键新增属性，开启密集布局模式 */
  grid-auto-flow: dense;
}

.element.green {
  grid-column: 1 / -1;
  background: green;
}

.element {
  background: red;
}

HTML 代码 #

<div class="parent">
  <div class="element"></div>
  <div class="element green"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

加上grid-auto-flow: dense之后，原来的第三个元素（DOM里的第三个div）就会自动填充到第一行的第二列空白处，绿色的跨列元素会被挤到第二行整行，后面的元素继续按两列正常排列，完全符合你要的效果。

这里要提个小注意点：grid-auto-flow: dense会改变元素的视觉顺序和DOM的原始顺序，如果你的页面需要考虑屏幕阅读器等可访问性场景，要确认这种视觉重排不会干扰用户理解内容的逻辑顺序。如果只是纯布局需求，这个技巧亲测好用，我自己做响应式卡片布局的时候经常用它。

内容来源于stack exchange