Masonry Tutorial: Learn to Code a Pinterest Layout Blog Design

Today we aren’t going to reinvent the wheel, but we are going to do one better. In this Masonry tutorial, we’ll help get your blog looking sleek and elegant with a Pinterest-like layout using Masonry JS.

The Masonry library allows your targeted elements to be placed based on their vertical height. This ensures your images or targeted elements fall right into place, regardless of the set height which will give your blog page a sleek and a Pinterest-like appearance.

Few things you’ll need for this Masonry tutorial:

1. The Masonry Library, which you can download here.
2. The jQuery Library, which you can find here: Google Hosted Libraries.
3. Next, put on some tunes, grab a coffee & a text editor, cause it’s time to code!

Step 1: Understanding the markup within a Masonry layout

Before we dive into the stylesheet and javascript, we will code our HTML markup. In this example, I will make a main blog page with a featured image, a title, and a small article summary. Each featured image will have the same width, but a different height and this is why we will need the Masonry library.

This is what your HTML would look like:

Step 2: Styling your markup for a Pinterest-Like blog experience

In this example, we are going to use a 4 column style (24% width grid with amargin 0em 0.5%; ). Now that we have a width in place for our article columns, we will not give them a height, instead we are going to give the second div in that container a height, and this div element will be a container for your featured image.

See Coding Below for an Example:

Step 3: Initializing and binding with jQuery

Now we can finally go ahead and plugin our javascript.

Make sure you’ve got your jQuery library placed into the head section of your site.

And your Masonry library loaded just before the closing body tag.

[...] <scripttype="”path/to/your/masonry.js”"></script>

Lastly, we will write a few lines of code to create our Masonry function: