---
title: "How to Create an Elementor Masonry Image Gallery?"
url: https://theplusaddons.com/docs/create-elementor-masonry-image-gallery/
date: 2023-06-16
modified: 2026-09-11
lang: en
author: "Aditya Sharma"
description: "Do you want a masonry image gallery in Elementor? Masonry keeps the columns even but lets each image keep its own height, so tall and wide photos sit together without..."
image: https://theplusaddons.com/wp-content/uploads/2023/06/How-to-Create-an-Elementor-Masonry-Image-Gallery_-1024x536.jpg
word_count: 647
---

# How to Create an Elementor Masonry Image Gallery?

## 

- The Gallery Listing widget in The Plus Addons for Elementor includes Masonry in the free plugin, with no CSS or extra library needed.
- Masonry keeps columns even while each image keeps its own height, so tall and wide photos sit together without being cropped.
- The Plus Addons for Elementor requires at least two columns for Masonry to read as masonry, and the default Desktop Column is Column 4.
- Messy Columns is a Pro control in Style > Extra Options, while plain Masonry is free and order follows source order rather than strict left to right.

Do you want a masonry image gallery in Elementor? Masonry keeps the columns even but lets each image keep its own height, so tall and wide photos sit together without being cropped and the gallery stacks like brickwork rather than a spreadsheet.

The Gallery Listing widget in The Plus Addons for Elementor has Masonry built in, in the free plugin, with no CSS or extra library needed.

*To check the complete feature overview documentation of The Plus Addons for Elementor Gallery Listing widget, [click here](https://theplusaddons.com/docs/gallery-listing-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-listing/?utm_source=tpae&utm_medium=docs&utm_campaign=text#image-gallery-wgts)

## Before You Start

- **Edition:** Free — available in both The Plus Addons for Elementor (Free) and Pro.- **Widget to enable:** Gallery Listing, switched on under **ThePlus Settings > Widgets**.

## Masonry or grid?

| | Grid | Masonry |
| --- | ---- | ------- |
| Tile heights | All identical | Each image keeps its own |
| Cropping | Needed to line tiles up | None |
| Vertical gaps | None | Uneven by design |
| Best for | Products, logos, anything comparable | Photography, mixed portrait and landscape |

If a straight bottom edge matters more than showing the whole photo, use [the grid layout](https://theplusaddons.com/docs/create-image-gallery-in-grid-layout-in-elementor/) instead.

## Step 1: Add the widget and choose the Masonry layout

Drag the **Gallery Listing** widget onto the page. On the **Content** tab, open the **Layout** section and pick **Masonry** — the second of the four layout tiles.

![The Layout control with Masonry selected, and the staggered masonry gallery on the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/tp-gallery-listout-layout-wide-masonry.webp)

## Step 2: Add your images

Open the **Content** section, leave **Select Option** on **Normal**, and click **Add Images**. Masonry rewards a deliberate mix of portrait and landscape — a set of identical squares in masonry just looks like a grid with gaps.

![The Add Images control showing nine images selected for the gallery](https://theplusaddons.com/wp-content/uploads/2026/09/tp-gallery-listout-add-images-wide-grid.webp)

## Step 3: Set the columns

**Content > Columns Manage** holds **Desktop Column** (default **Column 4**), plus separate tablet and mobile values. Masonry needs at least two columns to read as masonry; at one column it is just a vertical stack.

![The Desktop Column dropdown in Content > Columns Manage](https://theplusaddons.com/wp-content/uploads/2026/09/tp-gallery-listout-desktop-column-wide-grid.webp)

## Making it deliberately uneven

**Messy Columns**, in **Style > Extra Options**, offsets alternate columns vertically for a looser, more editorial arrangement. It is a Pro control, and it is in the *Style* tab's Extra Options, not the Content tab's.

![The Messy Columns toggle in Style > Extra Options](https://theplusaddons.com/wp-content/uploads/2026/09/tp-gallery-listout-messy-columns-wide-effects.webp)

## Settings Reference

| Setting | Where | Options | Default |
| ------- | ----- | ------- | ------- |
| Layout | Content > Layout | Grid, Masonry, Metro, Carousel (Pro) | Grid |
| Select Option | Content > Content | Normal, Repeater (Pro), ACF Gallery (Pro) | Normal |
| Add Images | Content > Content | Media library picker | Empty |
| Desktop Column | Content > Columns Manage | Column 1 to 6 | Column 4 |
| Popup Layout | Content > Layout | Default Light-box, No | Default Light-box |
| Messy Columns | **Style** > Extra Options | Show / Hide — Pro | Hide |

> *Two sections are called **Extra Options**, one on **Content** and one on **Style**, and they hold different controls. Messy Columns is on the **Style** one.*

## Limitations

- **Uneven bottom edges are the point.** Masonry will never end flush; if you need that, use the grid layout with a fixed image size.- **Do not fix the image size in masonry.** Turning on Display Image Size crops everything to one shape and removes the only thing masonry is for.- **Messy Columns is Pro.** Plain masonry is free.- **Order is source order.** Masonry fills columns as it goes, so the visual reading order is not strictly left to right.

## Troubleshooting

### It looks like a plain grid

Your images are all the same shape, so every tile is the same height. Masonry only shows itself with mixed proportions. Also check that **Display Image Size** in **Content > Extra Options** is off — it forces one size on everything.

### The columns overlap or bunch up

Masonry positions tiles once the images have loaded. If the layout settles wrong, clear any page cache and regenerate Elementor files from **Elementor > Tools > Regenerate CSS & Data**. A lazy-loading plugin that defers images can also delay the measurement.

### I cannot find Messy Columns

It is on the **Style** tab, in that tab's **Extra Options** section — not the Content tab's section of the same name. It is also a Pro control.

## Related Docs

- [Gallery Listing widget: settings overview](https://theplusaddons.com/docs/gallery-listing-widget-settings-overview/) — every control in the widget.- [Create an image gallery in grid layout](https://theplusaddons.com/docs/create-image-gallery-in-grid-layout-in-elementor/)- [Create an image gallery in metro layout](https://theplusaddons.com/docs/create-elementor-image-gallery-in-metro-layout/)- [Make every image the same size in a grid](https://theplusaddons.com/docs/make-elementor-image-gallery-of-the-same-size-in-grid/)

## Frequently Asked Questions

**Q: What makes a masonry image gallery different from a grid in Elementor?**
A: Masonry keeps each image at its own height while keeping the columns even, so tall and wide photos sit together without being cropped. Grid is the opposite: all tiles stay the same height, which gives you a straight bottom edge but usually means cropping or fixed sizing. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides both approaches, so the choice depends on whether you want full-image display or a cleaner aligned finish.

**Q: Why does my masonry gallery look like a plain grid?**
A: That usually happens when every image has the same shape, because masonry only becomes visible when the gallery mixes portrait and landscape proportions. Another common cause is Display Image Size being turned on in Content > Extra Options, which forces one size on everything and removes the uneven heights masonry needs. If you want masonry to read properly, use varied image proportions and keep that size override off.

**Q: How many columns should I use for a masonry gallery?**
A: Masonry needs at least two columns to read as masonry at all. With only one column, it becomes a vertical stack instead of a staggered layout. The Gallery Listing widget lets you set Desktop Column separately from tablet and mobile values, with Column 4 as the default on desktop. That makes column count part of the design, not just a responsive setting.

**Q: Can I make every image the same size in a masonry gallery?**
A: That works against what masonry is for. The page says not to fix image size in masonry because turning on Display Image Size crops everything into one shape and removes the uneven heights that make the layout useful. If you need every tile to end flush and match exactly, the grid layout with a fixed image size is the better fit.

**Q: Why are my masonry columns overlapping or bunching up?**
A: Masonry positions tiles after images load, so delayed loading can throw off the measurements. If the layout settles badly, clear any page cache and regenerate Elementor files from Elementor > Tools > Regenerate CSS & Data. A lazy-loading plugin can also delay image measurement, which is why this issue often shows up only after optimization tools are added.

**Q: Where is Messy Columns in The Plus Addons for Elementor?**
A: Messy Columns is in Style > Extra Options, not in the Content tab’s Extra Options section. That distinction matters because there are two sections with the same name and they control different things. It is also a Pro control, so plain masonry stays free while Messy Columns belongs to The Plus Addons for Elementor Pro.