---
title: "How to Create a Masonry Image Gallery in WordPress?"
url: https://nexterwp.com/docs/create-a-masonry-image-gallery-in-wordpress/
date: 2024-11-26
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "Photos are rarely all the same shape, and a strict grid crops the tall ones to make rows line up. The masonry layout in the Media Listing block packs each..."
image: https://nexterwp.com/wp-content/uploads/2024/11/create-a-masonry-image-gallery-in-wordpress-1024x519.jpg
word_count: 396
---

# How to Create a Masonry Image Gallery in WordPress?

## Key Takeaways

- Media Listing block usa Masonry para que cada columna se ajuste a su propia altura y cada foto conserve su altura completa, sin recortes para alinear filas.
- Nexter Blocks Pro incluye el bloque Media Listing, que se activa en Nexter > Blocks y requiere añadir primero las imágenes a la Media Library.
- Masonry funciona mejor con fotos de formas mixtas; con imágenes del mismo formato se ve igual que una grid, y el orden de lectura baja por las columnas en lugar de ir por las filas.

Photos are rarely all the same shape, and a strict grid crops the tall ones to make rows line up.

The masonry layout in the Media Listing block packs each column tightly instead, so every photo keeps its own height.

*For every Media Listing setting in one place, see the [Media Listing block guide](https://nexterwp.com/docs/add-media-listing-in-wordpress/).*

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/listing/wordpress-image-gallery/)

## Before You Start

- **Edition:** **Pro** — the Media Listing block is part of Nexter Blocks Pro.- **Block to enable:** Media Listing, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Your images uploaded:** add them to the Media Library first so you can pick them straight from the block.

## Steps

- Add the **Media Listing** block to your page and click **Design from Scratch**.

- In the **Layout** panel, set **Type** to **Images**.

![The Layout panel with the Type setting set to Images](https://nexterwp.com/wp-content/uploads/2026/09/media-listing-type.webp)

- Open **Content** and pick your images with **Select Option** on **Normal**.

![The Content panel with Select Option set to Normal](https://nexterwp.com/wp-content/uploads/2026/09/media-listing-content-normal.webp)

- Still in **Layout**, set **Layout** to **Masonry**.

![The Layout setting with Masonry selected](https://nexterwp.com/wp-content/uploads/2026/09/media-listing-layout.webp)

- In **Columns Manage**, set **Columns** per device and adjust **Columns Gap/Space**, then publish.

![The Columns dropdown](https://nexterwp.com/wp-content/uploads/2026/09/media-listing-columns.webp)

![A masonry gallery where each column packs photos of different heights](https://nexterwp.com/wp-content/uploads/2026/09/media-listing-fe-masonry.webp)

## Masonry Only Helps With Mixed Shapes

Masonry works by letting each column run to its own height. If every photo you upload is cropped to the same shape there is nothing to stagger, and the result is identical to a grid. The screenshot below shows the same eight photos in a grid, where the rows stay aligned and leave gaps under the shorter images.

![The same mixed photos in a grid, leaving gaps under the shorter ones](https://nexterwp.com/wp-content/uploads/2026/09/media-listing-fe-grid-mixed.webp)

## How It Behaves

- Each photo keeps its full height, so nothing is cropped to make rows match.- Items fill the shortest column first, which is why the bottom of each column ends at a different point.- Columns are set per device, exactly as in the grid layout.- Clicking a photo still opens the lightbox unless **Popup Layout** is set to **No**.

## Limitations

- **Pro only.**- With photos that are all the same shape the layout is indistinguishable from a grid.- Reading order runs down the columns rather than across the rows, so masonry is a poor fit when the order of the photos matters.- Images added under **Normal** carry no individual titles or links.

## Troubleshooting

### Masonry looks exactly like a grid

Your photos are all the same shape. Masonry has nothing to stagger until the images differ in height.

### Tiles bunch up briefly while the page loads

The layout settles once the images have loaded. On long galleries leave lazy loading on so the page stays light while that happens.

## Related Docs

- [Photo gallery grid](https://nexterwp.com/docs/create-wordpress-photo-gallery-grid/)- [Metro layout gallery](https://nexterwp.com/docs/create-wordpress-image-gallery-in-metro-layout/)- [Media Listing block: all settings](https://nexterwp.com/docs/add-media-listing-in-wordpress/)