Minimal Cross-platform Responsive Grid Layout with jQuery and CSS3

A minimal jQuery plugin to create a responsive grid layout that works nicely on desktop, mobile and tablet devices.

How to use it:

1. Include jQuery Javascript library and the jQuery Masonry plugin at the bottom of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.masonry.js"></script> 

2. The Html structure for the grid layout.

<div class="masonry">
  <div class="brick"> </div>
  <div class="brick"> </div>
  <div class="brick"> </div>
  <div class="brick"> </div>
  <div class="brick"> </div>
  <div class="brick"> </div>
  <div class="brick"> </div>
  <div class="brick"> </div>
  <div class="brick"> </div>
  <div class="brick"> </div>
  <div class="brick"> </div>
  <div class="brick"> </div>
</div>

3. Style the grid layout and make it responsive with CSS3 media queries.

.masonry {
  max-width: 1210px;
  margin: 0px auto;
  position: relative;
}

.brick {
  position: relative;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  border: 5px solid #fff;
  width: 300%;
  display: block;
  float: left;
  overflow: hidden;
  background: #2ecc71;
}

@media (min-width: 768px) {
.brick { width: 50%; }
}

@media (min-width: 960px) {
.brick {
  width: 300px;
  height: 200px;
}
}

4. Call the plugin to create a basic responsive grid layout.

$(".masonry").Masonry();

5. Customize the grid layout.

$(".masonry").Masonry({
desktop : [ // desktop
  [[0,0],[4,4]],
  [[0,4],[2,2]],
  [[2,4],[2,2]],
  [[4,0],[2,2]],
  [[6,0],[2,2]],
  [[4,2],[4,4]],
  [[8,0],[3,3]],
  [[8,3],[3,3]],
  [[11,0],[2,4]],
  [[11,2],[2,2]],
  [[13,2],[2,2]],
  [[11,4],[2,4]]
],
smartphone : [ // mobile
  [[0,0],[6,6]],
  [[6,0],[6,6]],
  [[12,0],[6,6]],
  [[18,0],[6,6]],
  [[24,0],[6,6]],
  [[30,0],[6,6]],
  [[36,0],[6,6]],
  [[42,0],[6,6]],
  [[48,0],[6,6]],
  [[54,0],[6,6]],
  [[60,0],[6,6]],
  [[66,0],[6,6]]
],
tablet : [ // tablet
  [[0,0],[6,5]],
  [[5,0],[3,3]],
  [[5,3],[3,3]],
  [[8,0],[6,5]],
  [[13,0],[3,3]],
  [[13,3],[3,3]],
  [[16,0],[6,5]],
  [[21,0],[3,3]],
  [[21,3],[3,3]],
  [[24,0],[6,5]],
  [[29,0],[3,3]],
  [[29,3],[3,3]]
],
start: function() {}, // callback
stop: function() {}, // callback
});

---

This awesome jQuery plugin is developed by monocult. For more Advanced Usages, please check the demo page or visit the official website.