Сітка з квадратами різного розміру поруч, а поверх один одного - html, css, flexbox

Я намагаюся створити щось подібне:

Я впевнений, що починаю неправильно, але я не можу зрозуміти, як інакше, крім того, я не можу знайти нічого в Інтернеті, щоб допомогти. Мій код поки що:

<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: Чому ви не використовуєте Завантажувач, Спасибі.

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