JSFiddle - React, Tailwind, and code Playground

HTML

<div id="colunas">
    <div class="boxpost"></div>
    <div class="boxpost maior"></div>
    <div class="boxpost"></div>
    <div class="boxpost maior"></div>
    <div class="boxpost"></div>
    <div class="boxpost maior"></div>
    <div class="boxpost"></div>
    <div class="boxpost maior"></div>
    <div class="boxpost"></div>
</div>

CSS

#colunas {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 15px;
}
.boxpost {
    display: inline-block;
    width: 100%;
    height: 100px;
    background-color: #936C6C;
    margin: 0 2px 15px 2px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
.maior{height:150px;}

@media (min-width: 960px) {
    #colunas {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

@media (min-width: 1100px) {
    #colunas {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }
}