如何让双列网格的右侧列元素溢出至左侧列区域

我当前的布局实现效果为：左侧是一个固定高度的蓝绿色盒子，右侧是2列网格布局，包含多个灰色小盒子，但右侧超出左侧高度的部分只会在右侧下方延伸。我想要的最终效果是：右侧超出左侧高度的小盒子能自动填充到左侧盒子的下方区域，且除左上角盒子外，所有小盒子按从左到右、从上到下的顺序排列，支持用Jinja循环动态渲染数据，无需硬编码位置。

当前实现代码 #

CSS代码 #

.test-outer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
}

.test-left {
  background-color: aquamarine;
  border-radius: 8px;
  border: 2px solid black;
  text-align: center;
  height: 6.28rem;
}

.test-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 1rem;
  column-gap: 1rem;
}

.test-right-item {
  background-color: #999;
  border-radius: 8px;
  border: 2px solid black;
  text-align: center;
}

HTML代码 #

<div class="test-outer">
  <div class="test-left">
    0
  </div>
  <div class="test-right">
    <div class="test-right-item">
      1<br>2
    </div>
    <div class="test-right-item">
      3<br>4
    </div>
    <div class="test-right-item">
      5<br>6
    </div>
    <div class="test-right-item">
      7<br>8
    </div>
    <div class="test-right-item">
      9<br>10
    </div>
    <div class="test-right-item">
      11<br>12
    </div>
    <div class="test-right-item">
      13<br>14
    </div>
    <div class="test-right-item">
      15<br>16
    </div>
  </div>
</div>

解决方案 #

可以通过单个网格布局实现，无需拆分多个容器，具体实现如下：

优化后的CSS代码 #

.test-outer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 3.14rem; /* 行高设为原左侧高度的一半，匹配右侧小盒子的行高 */
  gap: 1rem;
}

.test-left {
  background-color: aquamarine;
  border-radius: 8px;
  border: 2px solid black;
  text-align: center;
  grid-column: 1 / 3; /* 占据前2列 */
  grid-row: 1 / 3; /* 占据前2行，高度与原固定高度一致 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.test-right-item {
  background-color: #999;
  border-radius: 8px;
  border: 2px solid black;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

优化后的HTML代码 #

<div class="test-outer">
  <div class="test-left">0</div>
  <!-- 下方小盒子可直接用Jinja循环遍历数据输出，无需调整顺序 -->
  <div class="test-right-item">1<br>2</div>
  <div class="test-right-item">3<br>4</div>
  <div class="test-right-item">5<br>6</div>
  <div class="test-right-item">7<br>8</div>
  <div class="test-right-item">9<br>10</div>
  <div class="test-right-item">11<br>12</div>
  <div class="test-right-item">13<br>14</div>
  <div class="test-right-item">15<br>16</div>
</div>

方案说明 #

1. 外层容器设为4列网格，刚好匹配左侧盒子占2列、右侧小盒子每2个占一行的布局需求。
2. 左侧盒子通过grid-column和grid-row指定占据的网格区域，高度与原固定高度一致，无需硬编码height属性。
3. 所有小盒子按顺序放入网格，超出右侧区域的部分会自动填充到左侧盒子下方，完全支持Jinja循环动态渲染。

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