CSS Grid如何实现跨列/行单元格覆盖相邻元素而非挤走后续项

该需求可以通过CSS Grid实现，核心是开启网格的密集自动放置模式。

你遇到的元素被挤开的问题是CSS Grid默认配置的特性：默认grid-auto-flow为row（稀疏排布模式），当跨列/跨行的元素无法在当前行剩余单元格中放下时，会直接跳到下一行的起始位置放置，留下的空白不会被后续元素自动填充，就会出现后续元素被整体挤开的现象。

只需要在你的.grid选择器中新增一行grid-auto-flow: row dense配置即可，dense会触发密集排布规则，让自动放置算法回溯前面的空白位置，把尺寸匹配的元素填进去，不会留下无效空隙。

修改后完整代码如下：

.grid
  width: 100%
  height: 500px
  background-color: green
  display: grid
  grid-template-columns: repeat(6, 1fr)
  grid-template-rows: repeat(4, 1fr)
  gap: 1em
  /* 新增下面这行开启密集排布 */
  grid-auto-flow: row dense
                
  > *
    background-color: gray
  
  .doubleWidth
    grid-column: span 2

  .doubleHeight
    grid-row: span 2

该配置属于原生CSS Grid标准属性，不需要额外JS逻辑，符合你要的纯CSS极简方案要求。

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