JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<section>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box" style="height: 80px">3</div>
    <div class="box" style="height: 20px">4</div>
    <div class="box" style="height: 20px">5</div>
    <div class="box" style="height: 20px">6</div>
    <div class="box">7</div>
    <div class="box" style="height: 20px">8</div>
</section>

CSS

section {
    -webkit-columns: auto 3; /* Chrome, Safari, Opera */
    -moz-columns: auto 3; /* Firefox */
    columns: auto 3;
}
.box {
    position: relative;
    width:320px;    
    border:1px #ccc solid;
    padding:5px;
    margin:0 5px 5px 0;
    height: 100px;
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}