网格旁边有不同大小的方块，并且彼此叠加

Question

我正在努力创造这样的东西：

我确信自己错了，但我看不出其他情况，而且我无法在网上找到任何帮助。到目前为止我的代码是：

<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

Answer 1

• 解决方案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 ：使用砌体网格：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;