JSFiddle - React, Tailwind, and code Playground

by trewknowledge

HTML

<script src="http://packery.metafizzy.co/packery.pkgd.js"></script>
<div id="container">
    <div id="col-1" class="item">
        <div>ITEM</div>
    </div>
    <div id="col-2" class="item">
        <div>ITEM</div>
    </div>
    <div id="col-3">
        <div class="item w1">
            <div class="h2">Item</div>
        </div>
        <div class="item w1">
            <div class="h1">Item</div>
        </div>
        <div class="item w1">
            <div class="h2">Item</div>
        </div>
        <div class="item w1">
            <div class="h2">Item</div>
        </div>
        <div class="item w1">
            <div class="h2">Item</div>
        </div>
        <div class="item w1">
            <div class="h1">Item</div>
        </div>
        <div class="item w1">
            <div class="h2">Item</div>
        </div>
        <div class="item w1">
            <div class="h2">Item</div>
        </div>
    </div>
</div>

CSS

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#container {
    margin: 0 auto;
    max-width: 100%;
    width: 1360px;
}
#col-1 {
    width:50%;
    float: left;
    min-height: 1px;
    padding: 0 5px;
    position: relative;
    
}
#col-1 div {
    height:400px;
    width:100%;
}
#col-2, #col-3 {
    width:25%;
    float: left;
    min-height: 1px;
    padding: 0 5px;
    position: relative;
}

#col-2 div{
    height:300px;
    width:100%;
}

.w1 {
    width:100%;
}
.w2 {
    width:50%;
}
.h1 {
    height:100px;
}
.h2 {
    height:200px;
}
#col-1.item div {
    background:#333;
    padding:0 5px;
    float:left;
    margin-bottom:5px;
}
#col-2.item div {
    background:#444;
    padding:0 5px;
    float:left;
    margin-bottom:5px;
}

#col-3 .item {
    padding:0 5px;
    float:left;
    margin-bottom:5px;
}

#col-3 .item div {
    background:#111;    
}

@media only screen and (max-width: 1200px) {	
	#col-1 { width:66.66667%; }
	#col-2 { width: 33.33333%;}
	#col-3 { width: 100%; }
}

JavaScript

var $window = $(window);

var isPackeryEnabled = false;
var $container = $('#container');

function onResize() {
    var windowwidth = $window.width();
    var wasPackeryEnabled = isPackeryEnabled;
    isPackeryEnabled = $window.width() <= 1200;
    // only enable or disable pac
    if (isPackeryEnabled !== wasPackeryEnabled) {
        if (isPackeryEnabled) {
            // enable packery
            $container.packery({
                itemSelector: '.item'
            });
        } else {
            // disable packery
            $container.packery('destroy');
        }

    }
}


$window.resize(onResize);
// trigger initially
onResize();