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>

和CSS

.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;
}

问题是我无法使下一组div正确排在下面。 Jsfiddle

最佳答案

解决方案1：为何不使用Bootstrap，谢谢。

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
        </div>
        <div class="col-md-5">
            <div class="row">
                <div class="col-md-12">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                </div>
            </div>
        </div>
        <div class="col-md-5">
        </div>
    </div>
    <div class="row">
        <div class="col-md-5">
            <div class="row">
                <div class="col-md-12">
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                </div>
                <div class="col-md-6">
                </div>
            </div>
        </div>
        <div class="col-md-5">
            <div class="row">
                <div class="col-md-12">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                </div>
            </div>
        </div>
        <div class="col-md-2">
        </div>
    </div>
</div>

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

#container {
    width: 100%;
    max-width: 700px;
    margin: 2em auto;
}
.cols {
    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;
}
.box {
    margin-bottom: 20px;
}
.box.one {
    height: 200px;
    background-color: #d77575;
}
.box.two {
    height: 300px;
    background-color: #dcbc4c;
}
.box.three {
    background-color: #a3ca3b;
    height: 400px;
}
.box.four {
    background-color: #3daee3;
    height: 500px;
}
.box.five {
    background-color: #bb8ed8;
    height: 600px;
}
.box.six {
    background-color: #baafb1;
    height: 200px;
}

<div id="container" class="cols">
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box one"></div>
    <div class="box three"></div>
    <div class="box two"></div>
    <div class="box five"></div>
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box six"></div>
    <div class="box three"></div>
    <div class="box two"></div>
</div>

关于html - 彼此相邻且彼此重叠的具有不同大小正方形的网格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44360715/