---
title: "How to Add Logo Showcase in Masonry Grid Layout in Elementor?"
url: https://theplusaddons.com/docs/add-logo-showcase-in-masonry-grid-layout-in-elementor/
date: 2023-07-10
modified: 2026-09-18
lang: en
author: "Aditya Sharma"
description: "Client logos are rarely the same shape. A masonry grid lets each one keep its own height and closes the gaps that an even grid leaves behind. The Clients widget..."
image: https://theplusaddons.com/wp-content/uploads/2023/07/How-to-Add-Logo-Showcase-in-Masonry-Grid-Layout-in-Elementor_-1024x536.jpg
word_count: 469
---

# How to Add Logo Showcase in Masonry Grid Layout in Elementor?

## 

- The Clients widget from The Plus Addons for Elementor includes a built-in masonry layout that keeps each logo at its own height and closes the gaps left by an even grid.
- Columns Manage sets Desktop Column, Tablet Column, and Mobile Column, with 2, 3, 4, 5, 6, and 12 available and defaults of 3, 4, and 6; Columns Gap/Space Between controls spacing around each logo.
- Maximum Posts Display under Content Source defaults to 8, and Pagination, Load More, lazy loading, and the category filter are Pro.

Client logos are rarely the same shape. A masonry grid lets each one keep its own height and closes the gaps that an even grid leaves behind.

The **Clients** widget from The Plus Addons for Elementor has that layout built in.

*To check the complete feature overview documentation of The Plus Addons for Elementor Clients Listing widget, [click here](https://theplusaddons.com/docs/clients-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/client-logos/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Free** — the **Clients** widget is part of the free The Plus Addons for Elementor plugin.- **Widget to enable:** **Clients**, under **The Plus Addons > Widgets**. Elementor shows it in the **Listing** group.- **Prerequisite:** a few client entries to list — either posts in **Tp Clients**, each with a featured image as its logo, or rows in the widget's **Manage Clients** repeater.

## Switch to the masonry layout

- Edit the page with Elementor and drag the **Clients** widget onto it.- In **Layout**, click the second picture button — the one with offset rectangles. That is **Masonry**.- Leave **Minimum Height** empty. It sets a floor for every box, which flattens the masonry effect back into an even grid.- Leave **Select Source** on **Post Type**, or switch it to **Repeater** and add the logos by hand.

![The Clients widget panel showing the three Layout buttons and Select Source](https://theplusaddons.com/wp-content/uploads/2026/09/clientslisting-source.webp)

With logos of different heights the columns stagger:

![Front end showing eight client logos in a masonry grid, the columns staggered because the logos are different heights](https://theplusaddons.com/wp-content/uploads/2026/09/clientslisting-result-masonry.webp)

![A finished masonry logo showcase on a live page](https://theplusaddons.com/wp-content/uploads/2023/07/clients-listing-masonry-layout-demo.png)

## Set the columns

Open **Columns Manage** and set **Desktop Column**, **Tablet Column** and **Mobile Column**. They offer 2, 3, 4, 5, 6 and 12, and default to 3, 4 and 6. **Columns Gap/Space Between** sets the spacing around each logo.

## How It Behaves

- Each logo box keeps its own height and the next one starts right below it, so the columns end at different points.- If all your logos are the same height, masonry and grid look identical — the effect only shows when the heights differ.- Setting **Minimum Height** makes every box at least that tall, which removes the staggering.

## Limitations

- The masonry columns are laid out in the browser, so the logos settle into place a moment after the page loads.- Pagination, **Load More**, lazy loading and the category filter are Pro.- There is no **Style** dropdown to pick before the layout; older guides that mention one are out of date.

## Troubleshooting

### It looks exactly like the grid

Either your logos are all the same height, or **Minimum Height** is set. Clear **Minimum Height** and use logos of different heights.

### The logos overlap for a moment on load

That is the masonry layout being calculated. Giving the container a background or a fixed padding makes the shift less obvious.

### Only eight logos appear

**Maximum Posts Display** under **Content Source** defaults to 8.

## Related Docs

- [How to Show Elementor Client Logos in Grid Layout?](https://theplusaddons.com/docs/show-elementor-client-logos-in-grid-layout/)- [How to Create a Logo Carousel Slider in Elementor?](https://theplusaddons.com/docs/create-a-logo-carousel-slider-in-elementor/)- [Clients Listing Widget Settings Overview](https://theplusaddons.com/docs/clients-listing-widget-settings-overview/)

## Frequently Asked Questions

**Q: What do I need before adding a logo showcase in masonry grid layout in Elementor?**
A: The Clients widget from The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH is the key requirement, and it is part of the free plugin. You also need a few client entries ready to list, either as posts in Tp Clients with featured images or as rows in the widget’s Manage Clients repeater. That matters because masonry only looks right when there are multiple logos with different heights.

**Q: How do I make client logos display in a masonry layout instead of a regular grid?**
A: The masonry effect comes from the Clients widget’s Layout setting, where the second picture button with offset rectangles switches the layout to Masonry. Leaving Minimum Height empty is important because that setting forces boxes to the same floor height and flattens the staggered look back into an even grid. The Plus Addons for Elementor provides this inside Elementor, so the whole setup stays in the editor.

**Q: Why does my logo showcase look like a normal grid even after switching to masonry?**
A: That usually happens for one of two reasons: all your logos are the same height, or Minimum Height is set. Masonry only becomes visible when items have different heights, because each box keeps its own height and the next one starts right below it. Clearing Minimum Height restores the staggered columns, which is what closes the gaps an even grid leaves behind.

**Q: What should I set for columns in a masonry logo showcase?**
A: The Clients widget lets you control Desktop Column, Tablet Column, and Mobile Column separately, with 2, 3, 4, 5, 6, and 12 available. The defaults are 3 on desktop, 4 on tablet, and 6 on mobile. Columns Gap or Space Between controls how much breathing room sits around each logo, so it affects how dense or open the showcase feels.

**Q: Why do my logos overlap for a moment when the page loads?**
A: That brief overlap is normal for masonry because the columns are calculated in the browser after load. The logos settle into place once that calculation finishes. A practical workaround from the page is to give the container a background or fixed padding, which makes the shift less noticeable while the layout snaps into position.

**Q: Why are only eight client logos showing in my masonry grid?**
A: Maximum Posts Display under Content Source defaults to 8, so that setting caps how many logos appear at once. If you expect more than eight entries, this is usually the first place to check because it controls output before any visual layout settings matter. The page also notes that Pagination, Load More, lazy loading, and category filter are Pro.