masonry

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.

Unlike the pages laid out with CSS floats where the size of the elements are taken into consideration, in Masonry layout the elements are added one after another, first in the horizontal direction, then vertically.

The term Masonry layout 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 layout can equip a site with better functionality, as well as enhance site’s design.

The following are practical examples of Masonry layout usage:

1. 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.

2. 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.

3. 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.

There are many popular plugins for generating Masonry layouts, with a wide range of features:

• Masonry

• Wookmark

• Isotope

• Nested

• Freetile.js

Features of Masonry Layout Plugins:

• 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.