SOURCE

<div id="app">
    <div class="class1">
        <div class="class2"></div>
        <div class="class2"></div>
        <div class="class2"></div>
    </div>
    <div class="class3"></div>
    <div class="class1">
        <div class="class2"></div>
        <div class="class2"></div>
    </div>
    <div class="class3"></div>
    <div class="class1">
        <div class="class2"></div>
        <div class="class2"></div>
    </div>
    <div class="class3"></div>
    <div class="class1">
        <div class="class2"></div>
        <div class="class2"></div>
    </div>
    <div class="class3"></div>
    <div class="class1">
        <div class="class2"></div>
        <div class="class2"></div>
    </div>
    <div class="class3"></div>
    <div class="class1">
        <div class="class2"></div>
        <div class="class2"></div>
    </div>
    <div class="class3"></div>
    <div class="class1">
        <div class="class2"></div>
        <div class="class2"></div>
    </div>
</div>

#app {
    background: green;
    width: 100%;
    height: 700px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.class1 {
    display: flex;
    flex-direction: column;
}
.class2 {
    width: 100px;
    height: 100px;
    background: red;
    margin: 20px 0;
}
.class3 {
    width: 100px;
    height: 40px;
    background: yellow;
}