Flex masonry

by Louis Walch

HTML

<div class="grid">
    <div>
        Test<br/>Test<br/>Test<br/>
    </div>
    <div>
        Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
    </div>
    <div>
        Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
    </div>
    <div>
        Test<br/>Test<br/>Test<br/>
    </div>
</div>

SCSS

BODY {
    margin: 40px;
}

.grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    
   
    > DIV {
        width: 48%;
        padding: 5px;
        border: 1px solid black;
        background-color: #ccc;
    }
}