<div class="container">
<div class="elem">
<div></div>
</div>
<div class="elem">
<div></div>
</div>
<div class="elem">
<div></div>
</div>
<div class="elem">
<div></div>
</div>
<div class="elem">
<div></div>
</div>
<div class="elem">
<div></div>
</div>
<div class="elem">
<div></div>
</div>
</div>
.container {
column-count: 3;
column-gap: 30px;
column-rule: 1px solid purple;
width: 80%;
margin: 0 auto;
}
.elem {
display: inline-block;
margin-bottom: 30px;
height: 100px;
background-color: purple;
width: 100%;
}
.elem:nth-child(1),
.elem:nth-child(2),
.elem:nth-child(5),
.elem:nth-child(6) {
margin: 0 auto initial;
}
.elem:nth-child(5) {
height: 140px;
}
.elem:nth-child(2) {
height: 200px;
}
.elem div {
height: 60px;
background-color: yellowgreen;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.