Elementor – Flex Layout and Content Boxes as Masonry using Code

Until the Official Elementor Flex Containers are out there (at the time of recording they were in BETA mode) – then you can use some code to layout Text boxes in a user-controlled masonry style.

Add this to a HTML Widget:

<div id="container" class="cols">
    <div class="box one">Imran Siddiq</div>
    <div class="box two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec </div>
    <div class="box four">kk</div>
    <div class="box three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</div>
    <div class="box two">qq</div>
    <div class="box one">ww</div>
    <div class="box one">11</div>
    <div class="box two">22</div>
    <div class="box three">item 1 item 1</div>
</div>

Add this to the Custom CSS in the Advanced Tab of the HTML Widget:

.cols {
    -moz-column-count:3;
    -moz-column-width: 33%;
    -webkit-column-count:3;
    -webkit-column-width: 33%;
    column-count: 3;
    column-width: 33%;
}
.box {
    margin-bottom: 18px;
        padding: 10px;

}
.box.one {
    height: 50px;
    background-color: #D0D0ce;
}
.box.two {
    height: 100px;
    background-color: #f3f3f3;
}
.box.three {
    background-color: #FFA900;
    height: 150px;
}
.box.four {
    background-color: #0000ff;
    height: 150px;
}