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.

Key Takeaways

• Masonry layout, also known as Pinterest Style Layout, is a grid layout based on columns without fixed height rows, making optimal use of space inside a webpage by reducing unnecessary gaps.
• The Masonry layout is commonly used for image galleries, blog posts, and portfolios. It is especially useful when the items displayed on the grid have varied dimensions.
• Generating Masonry layouts can involve advanced calculations, and it is often more efficient to use a plugin. Popular plugins include Masonry, Wookmark, Isotope, Nested, and Freetile.js.
• Features of Masonry layout plugins can include dynamic column sizes, sorting and filtering, animation, dynamic elements, and layout options. It’s important to consider these features when choosing a plugin for your specific needs.

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:

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

• Masonry
• Wookmark
• Isotope
• Nested
• Freetile.js

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.

Frequently Asked Questions (FAQs) about Masonry Layout