Masonry Tutorial: Learn to Code a Pinterest Layout Blog Design

Give your blog a sleek grid style with MasonryJS

Read Later
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

HTML Markup

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:

The Title


Your Text

 

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 a margin 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:

.the--container{
max-width: 1200px;
width: 100%;
margin: auto;
border: 1px solid #f2f2f2;
overflow: hidden;
padding: 0em 0em 2em 0em;
}
.article--item{
float:left;
background: #f2f2f2;
width: 24%;
margin: 0em 0.5% 0.5em 0.5%;
}
.article--header{
height: 200px; // You can target each element with
// a nth-child element.
// to make a more unique and creative masonry grid.
background-size: cover;
background-position: center;
}

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:

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

Lastly, we will write a few lines of code to create our Masonry function:
var $theNest = $('.the--container'),
$theItem = $('.article--item'),
myMasonry = function(){
$theNest.masonry({
itemSelector: $theItem,
columnWidth: $theItem
})
};
$(window).on('load', myMasonry);

Now go & create your own Pinterest-like page layout with these Masonry tricks!

Hopefully this Masonry tutorial has been helpful. The overall use of the Masonry library can be extremely powerful when you’re using different height elements and want to apply a sleek UI to your website or a blog.

Please note, we didn’t try to fully explain all the capabilities and the abilities of the Masonry library. That’s for another time. But you can take full advantage of this library here: Masonry documentation.

Also, for more in-depth tutorials like this, check out the Tech section of the Magnetic Creative blog.

One last thing, we want to hear about your Masonry layout building efforts! Holler at us in the comments section below. Cheers!

Ideas Keep the World Interesting. If you enjoyed this, please share it.

It looks like you have some more time on your hands. If so, consider reading the following articles posted in Tech:

Close

No Problemo.

Enter your email address below, We'll shoot you a link!

Perfecto!

We've delivered a copy of to your inbox...


Now that we've got that out of the way, let's be friends.