Skip to content

The 4 types of thumbnail grids: what’s the best way to display thumbs on your photography website?

Photography websites usually display thumbnails on gallery pages, and on search results pages. But each type of thumbnail layout comes with its own pros and cons. 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.

Here’s a recap of the main thumbnail grid layouts:


1. Standard grids

thumbnail grid example 01 standard

Images maintain their aspect ratio, but are contained within a specific rectangle.

Thumbnails can be boxed (and aligned in the vertical-center):

standard thumbnail grid example 02

… or not boxed (and aligned to the top):

standard thumbnail grid example 01

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.


2. Fixed aspect ratio grids (usually square)

thumbnail grid example 02 square

Images get automatically cropped into a square, here are some examples:

square thumbs photo website example 01

square thumbs photo website example 02

Because of the fixed square layout, the entire grid looks much cleaner and more aligned. But you’re definitely doing a disservice to the images (because you’re not using their original aspect ratio).

The obvious example here is Instagram. Even though they now allow images for any aspect ratio, the Instagram profile grids still crop images in a square format:

square thumbs instagram example

Chase Jarvis actually forces all thumbnails to be cropped in a 3:2 aspect ratio:

fixed aspect ratio thumbs example

This obviously doesn’t bode well for vertical images (or when the focus is off-center):

fixed aspect ratio thumbs overcropping example


3. Masonry/Waterfall grids

thumbnail grid example 03 masonry waterfall

Images form equal columns, maintain their aspect ratio, and are all resized to have the same width. Examples:

masonry thumbnail grid photo website example 02

masonry thumbnail grid photo website example 02

masonry thumbnail grid photo website example 03

Vertical images appear larger, which is not ideal most of the times (especially since the majority of images are usually horizontal/landscape).

The waterfall layout has been made hugely popular by Pinterest:

masonry thumbnail grid photo website example 04 pinterest


Grids can be used not just for image thumbnails, but also for listing posts or products. The “Essential Grid” plugin (which is very powerful) supports waterfall/masonry grids. So does Envira Gallery.

The term “masonry grid”, then just know it’s a misconception, they’re usually just waterfall grids. A masonry layout would be similar to a brick wall (built by masons), there aren’t any image grids built this way.

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.


4. Justified grids

thumbnail grid example 04 justified

This is my favorite type of grid: images maintain their aspect ratio, and are resized to have the same height. So it’s somewhat similar to masonry/waterfall, but the horizontal images get the spotlight. Vertical images get smaller instead. Examples:

justified thumbnail grid example 01

justified thumbnail grid example 02

justified thumbnail grid example 03



Some platforms obviously don’t allow choosing a grid layout. But if you’re using WordPress, you’re in luck, there are plenty of plugins.

To build justified grids, this is the best plugin out there: Justified Image Grid.

One of its FAQ pages perfectly illustrates why a “justified grid” is better than a “waterfall grid”:

“The natural reading direction of most countries is horizontal, either left-to-right or right-to-left. When you tell a story with pictures, you do it in your reading order. For example, wedding photos. 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. Indeed, it’s good for galleries where the order is not important, that’s why it works so well for Pinterest and Tumblr. When you look at a JIG gallery, your eye movement is the same as during reading, it’s what your eyes are programmed to. Do you think it’s a coincidence that Flickr (the largest photo site), Shutterstock, Google image search, Google+, Google Photos, 500px front page all use this horizontal layout?”

The popular Envira Gallery allows you to create both Masonry/Waterfall and Justified image grids (demo).

Flickr, Google images and many other companies use a justified grid layout:

justified thumbnail grid example 05 flickr

justified thumbnail grid example 06 Google images

When DeviantArt switched to a justified grid, they gave a couple of solid arguments:

  1. Bigger thumbnails (so more emphasis is placed on the art)
  2. The old/standard grid created uneven and irregular gaps between thumbs, whereas the justified grid uses more of the screen space. The compromise was that image details (title, metadata etc.) have to now be displayed on hover instead.

A few more examples of companies using justified grids: Getty Images, Alamy, iStock.

So I think we have a winner! :-)


Custom grids

Besides those 4 common layouts, there are exceptions.

These websites display images in a custom grid, with no particular alignments, with some images intentionally displayed larger than others:

custom thumbnail grid example 01

custom thumbnail grid example 02



So there you have it. If you have full control over your site layout (like you do when using WordPress and its full range of plugins), choose the thumbnail grid that’s best suited for your type of images. In most cases, the justified grid is the way to go.

Regardless of how your thumbnail grids look, don’t forget this is just “fashion”. The quality of your images matters more. Dedicate some time to edit down your portfolio and to properly sequence your images.

Off-topic or inflammatory comments may be moderated.
Please add VALUE to the web, thanks!

Search for other articles:

Or explore these related categories:

Book a one-to-one consulting call with me:

Get more CLARITY and answers to your most pressing web-related questions.
You get actionable, specific advice, answering your questions on how to improve your photography website design & SEO, and get more results.

Learn more

Level up your photography website

Learn the exact tactics to grow your photography business and get more inquiries and sales from your website.
My BEST advice. Your inbox. Every Tuesday. Free.

No spam ever. You are free to unsubscribe at any time. 

“If you haven’t subscribed to Alex’s newsletter yet you’re a nutjob!”

“SO MUCH good stuff in there – where have you been all my life!!”

“Definitely worthwhile subscribing  – always full of great info.”

“The most useful out of everything I get via email. So thank you!”

“So much interesting content. It got my head spinning.”

“It’s so comprehensive and I love Alex’s brutal honesty”

“One of the very few emails that I allow to show up in my inbox.”

“Straightforward, to the point, no nonsense, solid information.”

“You have so much good information – it’s almost overwhelming!”

“The best information & advice on photography websites anywhere.”

🎙️ My interview on the Hair of the Dog Podcast Free SEO course for photographers Wedding photographers need to be different 🎙️ New podcast interview The market is selfish Google hates seeing repeated content! How to develop your soft skills as a photographer 7 quick principles for creating a great website 4 ways to make your photography website more trustworthy What are famous photographers doing right on their websites? Or better yet, what are they doing awfully wrong despite being successful?