Understanding Masonry Layout

The modern web design world is an innovative one. Table-based lists with offset pagination are rapidly falling out of favor, whereas Masonry layouts with infinite scrolling are becoming the new norm. This article provides an in-depth look at the Masonry layout and its usage.

Defining Masonry Layout

The term Masonry layout probably owes its name to the popular jQuery Masonry plugin that is used to generate this type of layout. Masonry layout is also referred to as the Pinterest Style Layout, as www.pinterest.com was the first major website to use this layout style.

Masonry is a grid layout based on columns. Unlike other grid layouts, it doesn’t have fixed height rows. Basically, Masonry layout optimizes the use of space inside the web page by reducing any unnecessary gaps. Without this type of layout, certain restrictions are required to maintain the structure of layout.

Developers and designers are accustomed to seeing web pages laid out with CSS floats. But this common type of layout doesn’t take the size of the elements into consideration. Instead, it adds elements one after another, first in the horizontal direction, then vertically. The following image shows a typical web page that uses floats for layout:

Default Layout

As you can see, having boxes with dynamic dimensions makes it difficult to design a layout without unnecessary gaps. This type of layout makes it harder for users as well, because the page height increases due to the additional spaces. It requires unnecessary scrolling to navigate to the bottom of the page. In such scenarios, we have to use a fixed-size box in each row.

Using a Masonry layout is the ultimate solution to this problem, as it reduces the spaces and tries to fit the maximum number of boxes into the rows and columns. Consider the following screenshot to see how the previous design looks in a Masonry layout. Notice that the height of the page is reduced and the layout is easier on the eye.

Masonry Layout

Masonry Layout Around the Web

Let’s look at some of the different uses of Masonry-style layouts across the Web:

Pinterest

THEWALL

Erik Johansson Photography

thereason.us

Practical Uses of Masonry Layout

Masonry layout can equip a site with better functionality, as well as enhance a site’s design. The following are practical examples of Masonry layout usage:

  • Image Galleries – The most popular use of Masonry layouts is for galleries. Image galleries are built using different types of images with varying dimensions. It can be challenging to create a set of images with the same dimensions, without losing their quality. Because of this, Masonry layouts are a great choice for creating galleries using images with varied dimensions.
  • Blog Posts – Generally, a blog’s home page lists the latest blog posts, along with a short summary. As long as we use one column to list posts, there won’t be any problems. However, with multiple columns, it is not possible to list the posts with varying length summaries. To keep the consistency of the layout, it is necessary to restrict the summary length. With a Masonry layout, we can list the latest posts in multiple columns without having to truncate the post summaries.
  • Portfolios – Masonry layouts are useful for displaying portfolio items. It can be used to present projects, designs, images, or anything that is relevant to your profile.

Choosing a Masonry Layout – Considerations

So far, we have discussed a few practical use cases of Masonry layouts, but there are countless other ways to utilize this layout style. If you are thinking about using a Masonry layout on your website, consider the following points before making your decision:

  • Generally, you will need to use a grid-based layout.
  • Items displayed on the grid should have varied dimensions.
  • In order to experience the real effects of a Masonry layout there should be a considerable number of items.

Generating Masonry Layouts

Generating Masonry layouts involves some advanced calculations, so it is wise to use a plugin, rather than building it from scratch. There are many popular plugins for generating Masonry layouts, with a wide range of features. The following is a list of the top Masonry layout plugins:

Features of Masonry Layout Plugins

The plugins listed in the previous section contain unique features in addition to the common feature set. It is difficult to understand the difference between each plugin just by looking at a Masonry layout generated by each one. All of the layouts will appear quite similar. It is important to consider the available features before choosing a plugin. Generally, most plugins provide an API and documentation for identifying their features.

I suggest looking at the available features of each plugin before making your choice. I have compiled the following list of common features from the plugins listed in the previous section. These are some of the main features, but each plugin also has its own unique ones. It’s up to you to choose the best plugin based on your application requirements.

  • Column sizes – Masonry layouts can have fixed-size columns or dynamic columns. Fixed-size columns are the norm. It is better to choose a plugin that allows dynamic columns, as it enhances the flexibility.
  • Sorting and Filtering – Plugins like Isotope allow you to sort and filter the elements without losing the structure of the layout. It is a good feature to have when you need dynamic Masonry layouts.
  • Animation – Unlike normal layouts, Masonry layouts change completely with the addition or removal of elements. Because of this, it is better to have animation effects for adjusting elements – this creates an awesome user experience.
  • Dynamic Elements – Generally, we create the layout on page load using the available elements. But some sites might require the ability to add or remove elements without refreshing. In such cases, the plugin should have the ability to auto adjust the layout to provide the optimal structure.
  • Layout Options – The plugin should allow you to set column width, gutter size, alignment, etc.

Creating a Masonry Layout via Plugin

Masonry by www.desandro.com is the most popular plugin from the previous list. The following is a step-by-step guide to quickly building a simple Masonry layout:

  • Step 1 – Download the masonry.pkgd.min.js file and include it at the end of the page as shown in the following code:
<html>
  <head>
    <title>Masonry Layout with Masonry Plugin</title>
  </head>
  <body>
    <script src='masonry.pkgd.min.js'></script>
  </body>
</html>
  • Step 2 – Create a list of elements with variable widths and heights. Each element should have a common class. Consider the following code:
<html>
  <head>
    <title>Masonry Layout with Masonry Plugin</title>
    <style>
      * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }

      .item {
        width:  50px;
        height: 50px;
        float: left;
        background: #2296DD;
        border: 2px solid #333;
      }

      .item.thumbnail {
        width:  100px;
        height: 100px;
        background: #cfcfcf
      }

      .item.medium {
        width:  150px;
        height: 50px;
        background: #A6E392
      }

      .item.large {
        width:  200px;
        height: 100px;
        background: #D092E3
      }
    </style>
  </head>
  <body>
    <div id='masonry'>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item thumbnail"></div>
      <div class="item medium"></div>
      <div class="item"></div>
      <div class="item large"></div>
      <div class="item"></div>
      <div class="item medium"></div>
    </div>

    <script src='masonry.pkgd.min.js'></script>
  </body>
</html>

As you can see, we have a common class called item for identifying elements in the grid layout. Then, we have three additional classes for changing the dimensions of elements. Finally, we include all of the elements inside a container called masonry.

  • Step 3 – Initializing the Masonry plugin is the final task in the process. We use this to restructure the elements and construct the layout. Consider the following initialization code:
<script>
  var container = document.querySelector('#masonry');
  var masonry = new Masonry(container, {
    columnWidth: 50,
    itemSelector: '.item'
  });
</script>

We can initialize the Masonry plugin by providing the container, item selector, and column width. We get the most optimal layout by defining element widths as multiples of the column width.

Conclusion

As you can see, it is simple to build a Masonry layout using plugins. Try experimenting with other plugins and their various settings to see the variations of Masonry layouts. After experimenting, answer some of the questions below. Feel free to share your experience among our audience.

  • What is the best Masonry layout plugin you have found, and why?
  • Do you have any practical use cases of Masonry layout?
  • What are the features you like to see in a Masonry plugin?

You can see a Masonry layout in action using this article’s demo link. You can also download the code here.

Looking forward to hearing from you.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Petit Paul

    Super great. If you want to show of how great a web designer you are, that is. But, for the average web user, which I believe I am, this becomes more and more a of a geek discussion. Me, and I believe I am sort of a Lambda user, I want web pages to be simple and to get to the information I am looking for as simply and as fast as possible. Too much information kills information. Though the layout you are showing are great – well, sort of – most of the interested parties will likely use this to flash (no pun intended) us with more and more and more and more ads. Preferably, flashy ones that obscure your screen that you have to dismiss before getting to the info you’re looking for. And then selecting in the numerous ensuying boxes which one is relevant and which is not, that is – again – sorting out which is ad and which isn’t. We have forgotten what the web was all about. It was not meant to be a platform for advertisement. But then again, it was such a long time ago…

    • http://www.growingwiththeweb.com/ Daniel Imms

      I have mixed feelings. I found Google+ quite disorienting when they made the switch to a masonry-like three column layout. I know some people who really hated it and opted out as soon as it was released.

      • http://thilak.in Thilak Rao

        +1 on the Google Plus reference. I personally don’t find Masonry layout to be very readable, especially if I’m on the site to consume content. Visual appealing, sure.. but not very usable.

        • http://www.innovativephp.com/ Rakhitha Nimesh

          Hi Rao

          Agreed. What do you suggest as a better layout?

          Thanks for sharing your thoughts

          • http://thilak.in Thilak Rao

            Well, it depends.. Visual content (like Pinterest) work very well with Masonry Layout, but if I’m consuming textual content (like feedly), I still prefer the good old fashioned endless scrolling.

      • Jingqi Xie

        As a Google+ user I think its masonry layout beautiful and readable.

        • http://www.innovativephp.com/ Rakhitha Nimesh

          Hi Xie

          Personally, I dont prefer Google+ being mazonry type layout. But it’s the preference of different users and how we think.

          Thanks for sharing your thoughts

      • http://www.innovativephp.com/ Rakhitha Nimesh

        Hi Daniel

        I agree with you regarding Google+. The previous layout was much better. But on site like Pinterest, this technique enhances the usability.

        Thanks for sharing your thoughts

    • Ivaylo Gerchev

      I completely agree
      with you. Unfortunately, many “modern” solutions looks great at first glance but
      instead of helping users to get what they want/need – the CONTENT, they
      actually distract them with all kinds of bells and whistles. What a pity!!!

      • http://www.innovativephp.com/ Rakhitha Nimesh

        Hi Gerchev

        I have to disagree with you in a certain way. There are modern techniques that looks great, but doesn’t provide any useful functionality. But I feel Mazonry is a great technique, when used for proper scenarios.

        What are the modern techniques you don’t like and why?

        Thanks for sharing your thoughts

        • Ivaylo Gerchev

          Hi Nimesh

          I hope you don’t get wrong my opinion. It’s not against your article, it’s “against” the Masonry layout and alike techniques, or more precisely against their bad and inefficient implementations.

          To me Masonry layout seems a bit chaotic and disordered. It looks like puzzle pieces, sometimes breaks the logical order and doesn’t have clear hierarchy – some items get more exposure than others, and that’s not always what we want. With regard to utilizing the page’s real estate efficiently, Masonry does perfect job. But this is not the most important thing. The most important thing is how fast, easy and smooth users can reach the content/information they need.

          As for the other techniques I consider as not quite useful and user friendly, they are:

          - Endleeeeeeeeess Scrooooooooolling – till now I’ve not found a proper implementation of this technique. The process of content loading is not as smooth as designers/developers promise and often leads to interruption that forces users to lose their tracks. They have to figure out where they have been, before they can continue. Also, every time when new content is loaded, the scrollbar change its size and position. All this is quite annoying process, at least for me.

          - Parallax Scrolling – the illusion of depth that this technique creates definitely looks cool. But can you tell me honestly: What is the actual benefit from this visual trickery for the users? Null!

          - Animation on Steroids – this happens when animations are overused or used without proper reason. The main purpose of animations and transitions is to communicate. They can be used to focus user’s attention, to show relationships between objects, to maintain context while changing views, and so forth. But many designers/developers use them just because they look cool.

          - Fancy Navigation Systems – by trying to make their websites original and creative, many designers/developers create fancy navigation systems which leads to mystery meet anti-pattern implementation. It’s a common anti-pattern that occurs when users have to hover over an item to understand how to use it. For instance, making navigation with only icons may looks cool, but often users can’t figure out what a particular icon means. They have to hover over each icon and hope for a tool tip about the purpose of the icon. Even worse is when no tool tip is available.

          The vast variety of HTML5 APIs and CSS3 Transforms, Transitions and Animations features gives designers/developers great power, but as it is said:

          “With great power comes great responsibility”

    • http://www.innovativephp.com/ Rakhitha Nimesh

      Hi Paul

      Agreed with you regarding most of your points. We like pages to be simple. But there are pretty good use cases of mazonry layout that enhances the user experience more than the normal layouts.

      Thanks for sharing your thoughts

  • RadneyAaronAlquiza

    U can combine “Extra Strong Responsive Grids” with Masonry. They look great together.

    • http://www.innovativephp.com/ Rakhitha Nimesh

      Hi

      Thanks for the comment.

      I haven’t used it yet. But certainly try it with Masonry to find out the advantages.

  • c01nd01r

    Why not use flexbox?

    • http://www.innovativephp.com/ Rakhitha Nimesh

      Yes. You can also use flexbox layout. It’s the preference of the user.

      Thanks

    • http://www.12snaps.com/ Paweł Grzybek

      Good point sir!

  • http://www.innovativephp.com/ Rakhitha Nimesh

    Hi Kirsten

    Thanks for the comment.

    I have used sample sites. So slowness of those sites doesn’t mean it has performance issues. But it will have slight performance overhead compared to normal lists without any effects.

  • http://www.innovativephp.com/ Rakhitha Nimesh

    Thanks for your interest

  • M S

    Nice!

    A comparison would have been better.
    Like a matrix with info like size of script etc.

    Most of them have pretty carppy sites for documentation,
    so plowing trough that to find info for comparisons isn’t much fun.

  • Rick Davies

    It’s worth mentioning that mentioning that masonry layouts can work well for ecommerce stores too – on collection pages where product thumbnail images are not equally proportioned..

  • Matt M.

    Nice to finally put a name with a horrible design trend.

  • http://quran.2index.net/ Said Bakr

    I think it is regeneration of the printed newspapers layouts electronically. I think it is very smart ideas. Also I wonder about adopting Pharos masonry i.e some layots just like Pharos temps to be horizontal masonry.

  • goldenluigi@yahoo.com

    where does the initialization code go?