Next & Previous

Getting Started with Masonry JS

Masonry JS is a powerful library for making reactive tile layouts so that content boxes and images can shuffle themselves around your page layout to make best use of space.

1. Create an HTML page and add some boxes

Create an HTML template and add some basic stuff like this. You can use any class names for container and item, they just have to match the CSS classes which you’re about to make.

<!doctype html>
  <meta charset="utf-8">


<div class="container">
	<div class="item w2">1</div>
	<div class="item w2">2</div>
	<div class="item w2 h3">3</div>
	<div class="item w2 h3">4</div>
	<div class="item w2 h2">6</div>
	<div class="item">7</div>
	<div class="item">8</div>


2. Add some CSS

You can the CSS inline in the style block or using a link tag (but you probably already knew that):

* {
  box-sizing: border-box;

.container {
  background: #EEE;
  width: 50%;
  margin-bottom: 20px;

.item {
  width:  60px;
  height: 60px;
  float: left;
  background: #09F;
  padding: 10px;
  margin: 0 10px 10px 0;

.item.w2 { width: 130px; }
.item.w3 { width: 200px; }
.item.w4 { width: 270px; }

.item.h2 { height: 130px; }
.item.h3 { height: 200px; }
.item.h4 { height: 270px; }


I have chosen to set a margin-left on the grid items because I think it makes it easier to tesselate output. The Masonry guide recommends passing a gutter parameter into the JS initialisation (below).

3. Setup the JS

After your container div, add the JS references to get jQuery and Masonry:

<script src="//"></script>
<script src="//"></script>

	  itemSelector: '.item',
	  columnWidth: 70,
	  transitionDuration: '0.2s'

Important Notes

You’re ready to go!

Open the page and resize it using Ctrl+Scroll, or the responsive layout tools. When items would become too big for the container, they fold underneath instead! Cool.


Appendix: Nice box sizes

OK, in our example, the basic size for an item is 60px:

.item {
  width:  60px;
  height: 60px;
  margin: 0 10px 10px 0;

…but what I’ll call the “real size” is 70px, because we add on the margin-left for each element.

To come up with your .item.wn classes, first imagine that there is a w1 class (you could even make it, for completeness sake) then, add on your “real size” (70px) each time you go up the scale:

.item.w1 { width: 60px; } /* Doesn't have to exist */
.item.w2 { width: 130px; } /* That's 60 + 70 */
.item.w2 { width: 200px; } /* That's 130 + 70 */


Hope this helps!

Written 2015-06-11