---
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-05-20
author: "Aditya Sharma"
description: "If you want to create a dynamic image gallery in WordPress, a masonry layout is a strong choice. With a masonry image gallery, your photos are arranged in a cascading..."
image: https://nexterwp.com/wp-content/uploads/2024/11/create-a-masonry-image-gallery-in-wordpress-1024x519.jpg
word_count: 321
---

# How to Create a Masonry Image Gallery in WordPress?

## Key Takeaways

- Nexter Blocks Media Listing block creates a masonry photo gallery in the WordPress block editor when Images is selected in the Type section and Masonry is selected in the Layout section.
- Media Listing block supports a video gallery grid by selecting Videos from the Type section, and it also offers an image popup type from the Popup Layout dropdown for full-size images in a lightbox without leaving the page.
- Columns Manage tab controls how images are distributed across different screen sizes, and the post lists photography portfolios, creative agency sites, WooCommerce product galleries, blog sections, and featured image sections as best uses.

If you want to create a dynamic image gallery in WordPress, a masonry layout is a strong choice. With a masonry image gallery, your photos are arranged in a cascading grid where each item fills the available vertical space, creating a modern and varied look.

With the Media Listing block from [Nexter Blocks](https://nexterwp.com/), you can create a masonry photo gallery in WordPress directly in the block editor.

*To check the complete feature overview documentation of the Nexter Blocks Media Listing block, [click here](https://nexterwp.com/docs/create-wordpress-image-gallery-with-category-filter/).*

**Requirement** – This block is part of Nexter Blocks. Make sure it is installed and activated.

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

**Best Used For:**

- Photography portfolios or creative agency sites where images are different heights and a masonry grid creates visual rhythm- WooCommerce product galleries where you want to display multiple product images without forcing a uniform grid- Blog or featured image sections where a cascading layout fills the page without leaving empty gaps

To do this, add the Media Listing block to the page:

1. Select **Images** from the **Type** section.

2. Then select the appropriate listing style and select **Masonry** from the **Layout** section under the **Layout** tab.

![Media Listing block masonry layout setting in Nexter Blocks](https://nexterwp.com/wp-content/uploads/2024/11/media-listing-image-masonry-new.png)

> *Note: Similarly, you can create a video gallery grid by selecting ****Videos**** from the ****Type**** section.*

You can also select the image popup type from the **Popup Layout** dropdown. Use this when you want visitors to view full-size images in a lightbox without leaving the page.

To add hover zoom or overlay effects to your gallery images, see [How to Add Advanced Effects to an Image in WordPress?](https://nexterwp.com/docs/add-advanced-effects-to-an-image-in-wordpress/) for additional image styling options in Nexter Blocks.

3. In the **Content** tab, select the appropriate content source and add images to the gallery.

Now your gallery will display in a masonry layout. Manage the number of columns from the **Columns Manage** tab to control how images are distributed across different screen sizes.

![Masonry image gallery created with Nexter Blocks in WordPress](https://nexterwp.com/wp-content/uploads/2024/11/masonry-demo-1024x708.png)

Also, read [How to Create WordPress Image Gallery in Metro Layout?](https://nexterwp.com/docs/create-wordpress-image-gallery-in-metro-layout/)