Html 具有不同大小的正方形的网格，这些正方形彼此相邻，并且位于彼此的顶部

我试图创造这样的东西：

我确信我开始的时候是错的，但我看不出还有什么别的办法，而且我在网上也找不到任何帮助。到目前为止，我的代码是：

<div class="container">
    <div class="one">
        one
    </div>
    <div class="two">
        two
    </div>
    <div class="three">
        three
    </div>
    <div class="four">
        four
    </div>
    <div class="five">
        five
    </div>
    <div class="six">
        six
    </div>
</div>

问题是我无法让下一组div正确排列

• 解决方案1：为什么不使用引导程序呢

• 解决方案2：使用砌体网格：

#容器{
宽度：100%；
最大宽度：700px；
利润率：2米自动；
}
科尔斯先生{
-moz列数：3；
-moz柱间距：3%；
-moz列宽：30%；
-webkit列数：3；
-webkit列间距：3%；
-webkit列宽：30%；
列数：3；
柱间距：3%；
列宽：30%；
}
.盒子{
边缘底部：20px；
}
1号包厢{
高度：200px；
背景色：#d77575；
}
.盒子2{
高度：300px；
背景色：#dcbc4c；
}
.三号包厢{
背景色：#a3ca3b；
高度：400px；
}
.四号包厢{
背景色：#3daee3；
高度：500px；
}
.五号包厢{
背景色：#bb8ed8；
高度：600px；
}
.六号包厢{
背景色：#baafb1；
高度：200px；
}

---

这可能是我一直在寻找的副本，但我不知道如何搜索。谢谢。

.container {
  background-color: blue;
  display: flex;
}

.one {
  height: 400px;
  width: 30%;
  background-color: red;
}
.two {
  height: 250px;
  width: 35%;
  background-color: white;
}
.three {
  height: 400px;
  width: 35%;
  background-color: lightblue;
}