html - 如何使用 Bootstrap 4 制作这个网格系统？

Question

我正在尝试制作以下网格：

不幸的是，它现在不适合我。我不知道如何放置容器以填充彼此相邻的空白空间。

这只是一个演示示例：https ://jsfiddle.net/7m2bfx65/2/ 。

 <div class="container">
  <div class="row">
    <div class="col-6">Container 1</div>
    <div class="col-6">Container 2<br/>Container 2<br/>Container 2</div>
    <div class="col-6">Container 3<br/>Container 3<br/>Container 3<br/>Container 3<br/>Container 3</div>
    <div class="col-6">Container 4<br/>Container 4<br/></div>
    <div class="col-6">Container 5</div>
    <div class="col-6">Container 6</div>
  </div>
  <div class="row">
    <div class="col">Container 7<br/><br/><br/><br/><br/><br/><br/><br/></div>
  </div>
</div>

如您所见，容器 3、5 和 6 的位置不正确，容器 1 和 4 的高度不同。

如果您知道如何解决它，我非常感谢您的帮助。我也更喜欢使用 Bootstrap 4 Flex 网格系统。

标签： htmlcsstwitter-bootstrapcontainerspositioning