Why masonry layout is taking over the world

You may know it as the ‘Pinterest layout’ – a way of displaying images in a grid that’s increasingly popular online. With the masonry style, images are arranged on a page so that they make best use of the available space. It looks fresh and modern and is a great web design approach if you’ve got an image-heavy site.

What is masonry layout?

Masonry layout works by placing elements of a page in the optimum position based on what space is available, similar to a mason fitting stones in a wall (that’s where it gets its name). Pinterest was the first mainstream website to use this layout style, and it’s now popular across a wide range of image-heavy sites. This includes many photographers’ online portfolios, artists’ galleries, ecommerce sites and also some image-heavy blogs.

Why is it popular now?

There are several reasons the masonry image layout is becoming increasingly prolific. For a start, decent bandwidth in most of the developed world means many people can view images on their device without any problems. That means there needs to be an easy way to accommodate all these images on a page without having lots of scrolling. Masonry style helps web designers cram lots of images into the page without wasting any space because the images are tessellated.

Masonry layout tends to work well with responsive design, meaning it’s a style that can work for most devices that it’s being viewed on. That’s increasingly important in a world where many users want to view images on their mobile but still expect a good user experience.

Modern web build tools such as WordPress are responding to the popularity and practicality of masonry by offering various tools to help you easily build and administer a masonry-style gallery with minimal effort. This includes resizing tools so you can easily crop or shrink your images to the same width to accommodate them in a masonry-style grid. In the Pinterest style, all images have the same width but can have varying heights. You don’t need to resize the images that you upload to this gallery, instead the Pinterest interface will do that for you. Now many other web admin tools offer similar features, making it really easy to create and update a masonry style gallery without having to use a designer or Photoshop for image resizing.

If you have an image-heavy site and especially if you run an online gallery, speak to your web designer about how the masonry style could work for you.