Masonry.js 2 column layout w/ 2 sizes of blocks

by James

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.js"></script>
<h1>Masonry - columnWidth</h1>

<div class="grid">
    <div class="grid-item">1</div>
    <div class="grid-item item2">2</div>
    <div class="grid-item item2">3</div>
    <div class="grid-item item2">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item item2">7 (should be under 4)</div>
    <div class="grid-item item2">8 (should be above 9)</div>
    <div class="grid-item item2">9 (should be under 8)</div>
    <div class="grid-item">10</div>
</div>

CSS

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    font-family: sans-serif;
    color: #000;
    font-weight: 300
}
/* ---- grid ---- */
 .grid {
    background: #EEE;
    max-width: 1200px;
    width: 100%;
}
/* clearfix */
 .grid:after {
    content:'';
    display: block;
    clear: both;
}
/* ---- grid-item ---- */
 .grid-item {
    width: 60%;
    height: 200px;
    float: left;
    background: #bbb;
    border: 1px solid #333;
    border-radius: 3px;
}
.item2 {
    width: 40%;
    height: 100px;
}

JavaScript

// external js: masonry.pkgd.js

$(document).ready(function () {

    $('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: 1
    });

});