JSFiddle - React, Tailwind, and code Playground

by nickpish

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js"></script>
<div id="wrapper" class="cf">
    <div class="grid-sizer"></div>
    <div class="gutter-sizer"></div>
    <div class="item sm" style="height:400px">[ITEM-1]</div>
    <div class="item lg" style="height:450px">[ITEM-2]</div>
    <div class="item sm" style="height:950px">[ITEM-3]</div>
    <div class="item lg" style="height:275px">[ITEM-4]</div>
    <div class="item lg" style="height:165px">[ITEM-5]</div>
    <div class="item lg" style="height:275px">[ITEM-5]</div>
    <div class="item lg" style="height:275px">[ITEM-5]</div>
    <div class="item sm" style="height:250px">[ITEM-6]</div>
</div>
<!-- /#wrapper -->

CSS

/*--- masonry structure --- */
 #wrapper {
    max-width: 960px;
    margin: 25px auto 0 auto;
    border: 1px solid #eee;
    padding: 1%;
}
.grid-sizer {
    width: 30%;
}
.gutter-sizer {
    width: 5%;
}
.item {
    float: left;
    background-color: #eee;
    margin-bottom: 20px;
}
.item.sm {
    width: 30%;
}
.item.lg {
    width: 62%;
}
/*--- media query to linearize on mobile --- */
 @media only screen and (max-width : 481px) {
    .item {
        float: none;
    }
    .item.sm, .item.lg {
        width: 100%;
    }
}
/*--- resets & clearfix --- */
 html, body, div, span, h1, h2, h3, p, a, ul, ol, li, img, article, aside, blockquote, figure, figcaption, footer, header, hgroup, menu, nav, section, time {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font-weight: normal;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, time {
    display: block;
}
a {
    outline: none;
}
.cf:before, .cf:after {
    content:"";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

JavaScript

$('#wrapper').masonry({
    columnWidth: ".grid-sizer",
    gutter: ".gutter-sizer",
    itemSelector: ".item",
});