如何实现第三个容器与前两个容器并排并适配右侧空白？

要实现你想要的布局，核心是改变容器的排列逻辑——默认块元素会垂直堆叠，我们可以用CSS Grid快速实现左侧上下分块、右侧整列占满的布局：

修改后的完整代码 #

CSS #

* {
  padding: 0;
  margin: 0;
}

#only {
  display: grid;
  /* 定义两列，每列占50%视口宽度 */
  grid-template-columns: 50vw 50vw;
  /* 定义两行，每行占50%视口高度 */
  grid-template-rows: 50vh 50vh;
  /* 确保父容器占满整个视口高度 */
  height: 100vh;
}

.container {
  background-color: rgb(181, 233, 138);
}

.container2 {
  background-color: rgb(2, 159, 243);
}

.container3 {
  background-color: rgb(23, 223, 133);
  /* 让第三个容器占据右侧列的全部两行高度 */
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

HTML #

<section id="only">
  <div class="only container"></div>
  <div class="only container2"></div>
  <div class="only container3"></div>
</section>

关键调整说明 #

• 给父容器#only设置display: grid，通过grid-template-columns和grid-template-rows直接划分出匹配需求的网格布局，替代原来的块级堆叠逻辑。
• 给.container3添加网格定位属性，让它跨右侧列的全部两行，刚好填满右侧空白区域，同时覆盖左侧两个容器的总高度。
• 移除了每个容器单独设置的width和height，网格会自动分配预设的尺寸，减少冗余代码。

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