Columnar Grid Layout Test

by Jayson Buquia

HTML

<div class="main">
    <div class="rec rec3">1</div>
    <div class="rec">2</div>
    <div class="rec rec3">3</div>
    <div class="rec rec2">4</div>
    <div class="rec rec3">5</div>
    <div class="rec">6</div>
    <div class="rec rec3">7</div>
    <div class="rec">8</div>
    <div class="rec">9</div>
    <div class="rec rec2">10</div>
</div>

SCSS

.main {
    width: 500px;
    background: #efefef;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    
    &:before, &:after {
        content: '';
        display: table;
        clear: both;
    }
}

.rec {
    width: 50%;
    height: 100px;
    background: green;
    margin-bottom: 10px;
    
    &.rec2 {
        height: 150px;
    }
    
     &.rec3 {
        height: 175px;
    }
    
     &.rec4 {
        height: 230px;
    }
}