如何避免CSS Grid布局中出现空白列？

你遇到的核心问题是：grid-auto-flow: dense 不会调整元素的布局优先级，它只能填充已存在的、能容纳当前元素的空白。在你的DOM结构中，第二个小卡片先于中等卡片被布局，占了第一行的第二列，导致第一行只剩1列空位，放不下需要2列的中等卡片，所以dense无法实现你想要的重排效果。

纯CSS解决方案：利用order属性调整布局优先级 #

通过给中等卡片设置更低的order值，让它优先被Grid布局，这样就能抢占第一行的2列空位，和第一个小卡片填满整行，第二个小卡片则自动下移到第二行。

修改后的代码如下：

<html>
<style>
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px;
  grid-auto-flow: dense;
}

.wrapper {
  border: 1px solid blue;
}

.medium_card, .small_card {
  padding: 12px;
}

.wrapper div.small_card {
  background-color: red;
}

.wrapper div.medium_card {
  background-color: green;
  grid-column-end: span 2;
  order: -1; /* 让中等卡片优先布局 */
}
</style>

<body>
<div class="wrapper">
  <div class="small_card">Small Card 1 (span 1)</div>
  <div class="small_card">Small Card 2 (span 1)</div>
  <div class="medium_card">Medium Card (span 2)</div>
</div>
</body>
</html>

效果说明 #

• 中等卡片因order: -1会被优先布局，第一行第一个小卡片占1列后，剩余2列刚好容纳中等卡片，填满整行。
• 第二个小卡片随后被布局到第二行，完全符合你想要的无间隙效果。
• 这个方案适配动态生成的场景，只要给所有中等卡片统一设置order: -1即可，无需JS干预。

内容的提问来源于stack exchange，提问作者J. Adam