JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.2.1/masonry.pkgd.min.js"></script>
<div id="magazineWraping">
    <div class="magBox box1x2">1</div>
    <div class="magBox box1x2">2</div>
    <div class="magBox box2x1">3</div>
    <div class="magBox box1x2">4</div>
    <div class="magBox box2x2">5</div>
    <div class="magBox box2x3">6</div>
    <div class="magBox">7</div>
    <div class="magBox">8</div>
    <div class="magBox box2x1">9</div>
    <div class="magBox box2x2">10</div>
    <div class="magBox box2x2">11</div>
    <div class="magBox box1x2">12</div>
    <div class="magBox">13</div>
    <div class="magBox box1x2">14</div>
    <div class="magBox box2x2">15</div>
    <div class="magBox box1x2">16</div>
    <div class="magBox">17</div>
    <div class="magBox box4x2">18</div>
    <div class="magBox box2x1">19</div>
    <div class="magBox box2x1">20</div>
</div>

CSS

* {box-sizing: border-box;}

#magazineWraping {
    background: #888;
    max-width: 1140px;
    margin: auto;
}

.magBox:after {content:'';display: block;clear: both;} /*clear fix*/

.magBox {
    float: left;
    width: 165px;
    height: 165px;
    max-width: 100%;
    margin-bottom: 20px;
    background: #ccc;
    text-align: center;
    padding:50px;
}

/* 2 cols + 1 gutter = */
.magBox.box4x2 {width: 750px;height: 350px;}
.magBox.box2x3 {width: 360px;height: 535px;}
.magBox.box2x2 {width: 360px;height: 350px;}
.magBox.box1x2 {height: 350px;}
.magBox.box2x1 {width: 360px;}

JavaScript

$('#magazineWraping').masonry({
    columnWidth: 165,
    itemSelector: '.magBox',
    gutter: 30,
    transitionDuration: '0.2s'
});