Masonry Tweaked

index.html

<h1>Masonry - columnWidth</h1>

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item grid-item-height"></div>
  <div class="grid-item grid-item-width"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Masonry Tweaked.markdown

Masonry Tweaked

Forked from David DeSandro's Pen Masonry - columnWidth.

A Pen by Arturo Escartin on CodePen.

License.

script.js

// external js: masonry.pkgd.js

$(document).ready( function() {

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

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.js"></script>

style.css

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
  background: #EEE;
  max-width: 1200px;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item {
  width: 300px;
  height: 300px;
  float: left;
  background: #D26;
  border: 1px solid #000;
}

.grid-item-height {
  height: 600px;
  width: 300px;
}

.grid-item-width {
  height: 300px;
  width: 600px;
}