How to create a Pinterest like gallery

  • Posted on: 22 May 2012
  • By: Antti

I was recently working on a small photo gallery for one of my sites. Having images with various dimensions I quickly ran into trouble aligning the photos nicely with CSS alone. What I wanted was for the photos to align like they do in Pinterest; flowing smoothly next to each other despite being of various size. So I seeked out a solution that did just that.

The Problem

This illustration below is rather self explanatory and shows the problem with aligning various sized images using CSS alone.

Masonry Illustration

The Solution

I found an excellent jQuery plugin called Masonry that was easy to implement and worked like a charm. Masonry is a dynamic grid layout plugin for jQuery. I won't repeat the how-to steps here as the instructions on the site were clear and simple. If needed be there's also a version of Masonry that doesn't use any Javascript framework.