Indeed, it’s good for galleries where the order is not important, that’s why it works so well for Pinterest and Tumblr. Can you imagine that in a vertical layout? How can you tell which image is next? There is no natural flow except a sense of infinity by scrolling and scrolling. When you tell a story with pictures, you do it in your reading order. “The natural reading direction of most countries is horizontal, either left-to-right or right-to-left. One of its FAQ pages perfectly illustrates why a “justified grid” is better than a “waterfall grid”: To build justified grids, this is the best plugin out there: Justified Image Grid. But if you’re using WordPress, you’re in luck, there are plenty of plugins.

Some platforms obviously don’t allow choosing a grid layout. So it’s somewhat similar to masonry/waterfall, but the horizontal images get the spotlight. This is my favorite type of grid: images maintain their aspect ratio, and are resized to have the same height. So although “waterfall” would be more correct, the term “masonry grid” has become more popular, so be sure to search for this term when looking for a plugin. A masonry layout would be similar to a brick wall (built by masons), there aren’t any image grids built this way. The term “masonry grid”, then just know it’s a misconception, they’re usually just waterfall grids. The “Essential Grid” plugin (which is very powerful) supports waterfall/masonry grids. Grids can be used not just for image thumbnails, but also for listing posts or products. The waterfall layout has been made hugely popular by Pinterest: Vertical images appear larger, which is not ideal most of the times (especially since the majority of images are usually horizontal/landscape). Images form equal columns, maintain their aspect ratio, and are all resized to have the same width. This obviously doesn’t bode well for vertical images (or when the focus is off-center): Even though they now allow images for any aspect ratio, the Instagram profile grids still crop images in a square format:Ĭhase Jarvis actually forces all thumbnails to be cropped in a 3:2 aspect ratio: But you’re definitely doing a disservice to the images (because you’re not using their original aspect ratio).

Images get automatically cropped into a square, here are some examples:īecause of the fixed square layout, the entire grid looks much cleaner and more aligned. This type of grid is usually preferred when you need to display some info underneath each thumbnail (filenames, captions, buy buttons etc.), although the other grid layouts can handle that too.Ģ. Fixed aspect ratio grids (usually square) Thumbnails can be boxed (and aligned in the vertical-center): Images maintain their aspect ratio, but are contained within a specific rectangle. Here’s a recap of the main thumbnail grid layouts: If you want to display your image thumbnails in the best possible manner, read on to fully understand your options and to get inspired from other photographers. But each type of thumbnail layout comes with its own pros and cons. Photography websites usually display thumbnails on gallery pages, and on search results pages. 2. Fixed aspect ratio grids (usually square).

Types of grids