---
title: "How to Create an Elementor Image Gallery in Metro Layout?"
url: https://theplusaddons.com/docs/create-elementor-image-gallery-in-metro-layout/
date: 2023-06-16
modified: 2026-09-11
lang: en
author: "Aditya Sharma"
description: "Do you want a metro-style image gallery in Elementor? Metro mixes tile sizes inside one arrangement, so a few images sit large while the rest fill in around them. It..."
image: https://theplusaddons.com/wp-content/uploads/2023/06/How-to-Create-an-Elementor-Image-Gallery-in-Metro-Layout_-1024x536.jpg
word_count: 598
---

# How to Create an Elementor Image Gallery in Metro Layout?

## 

- Gallery Listing widget en The Plus Addons for Elementor incluye Metro en el plugin gratuito, sin escribir CSS grid a mano.
- Metro asigna tamaños de mosaico por posición, así que el orden de las imágenes en Add Images determina qué fotos reciben los mosaicos grandes.
- Metro Column reemplaza Desktop, Tablet y Mobile en Content > Columns Manage, con opciones 3, 4, 5 y 6; en el plugin gratuito 4 a 6 aparecen como PRO.
- Metro Style y Tablet Responsive añaden control del patrón y del ajuste para tabletas, pero el patrón se repite y funciona mejor con un conjunto pequeño y curado de imágenes.

Do you want a metro-style image gallery in Elementor? Metro mixes tile sizes inside one arrangement, so a few images sit large while the rest fill in around them. It is the layout to reach for when some images deserve more weight than others.

The Gallery Listing widget in The Plus Addons for Elementor has Metro built in, in the free plugin, with no CSS grid to hand-write.

*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**.

## Which layout do you actually want?

| Layout | Tile sizes | Use it when |
| ------ | ---------- | ----------- |
| Grid | All identical | Every image carries equal weight |
| Masonry | Equal width, natural height | Photography with mixed proportions |
| **Metro** | **Deliberately mixed** | **Some images should dominate** |
| Carousel (Pro) | Slides | Space is tight and images can scroll |

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

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

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

## Step 2: Add your images, in the order you want them

Open the **Content** section, leave **Select Option** on **Normal**, and click **Add Images**. **Order matters more here than in any other layout** — metro assigns tile sizes by position, so the images you put first get the prominent tiles. Drag to reorder inside the picker.

![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

Metro has its own column control. In **Content > Columns Manage**, the usual Desktop, Tablet and Mobile Column settings are hidden and **Metro Column** takes their place: 3, 4, 5 or 6, default **3**. In the free plugin 4 to 6 are marked PRO. **Metro Style**, below it, picks the tile pattern for that column count, and **Tablet Responsive** gives tablets their own metro setting.

## 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 |
| Metro Column | Content > Columns Manage | 3, 4 (Pro), 5 (Pro), 6 (Pro) | 3 |
| Metro Style | Content > Columns Manage | Preset patterns, or Custom | Style 1 |
| Popup Layout | Content > Layout | Default Light-box, No | Default Light-box |

## Limitations

- **You do not choose which image is large.** Metro assigns tile sizes from a fixed pattern based on position, so the only control you have is the order of the images.- **Large tiles crop hardest.** A tile that is wide and short will crop a portrait photo heavily. Put landscape images in the positions that get the big tiles.- **The pattern repeats.** With a lot of images the arrangement cycles, so metro reads best with a smaller, curated set.- **Three columns in the free plugin.** Four, five and six metro columns are Pro.

## Troubleshooting

### Every tile is the same size

Check the layout really is **Metro** and not Grid — they sit next to each other in the Layout control. Then try another **Metro Style** in Content > Columns Manage.

### The wrong image is getting the big tile

Metro assigns sizes by position, so reorder the images in **Add Images**. Drag the one you want featured earlier in the list.

### Images look badly cropped

Metro tiles have fixed proportions and crop to fill. Move portrait images to positions that get tall tiles, or switch to [Masonry](https://theplusaddons.com/docs/create-elementor-masonry-image-gallery/), which never crops.

## 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 Elementor masonry image gallery](https://theplusaddons.com/docs/create-elementor-masonry-image-gallery/)- [Create a filterable image gallery in Elementor](https://theplusaddons.com/docs/create-filterable-image-gallery-in-elementor/)

## Frequently Asked Questions

**Q: Why are all my Metro gallery tiles the same size?**
A: Metro only looks mixed when the layout is actually set to Metro, not Grid. The page also says the tile pattern depends on the Metro Style in Content > Columns Manage, so if every tile looks identical, the first thing to check is whether you picked the right layout tile and then try a different Metro Style. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH includes this Metro layout inside the Gallery Listing widget.

**Q: How do I make one image get the big tile in an Elementor metro gallery?**
A: Metro assigns tile sizes by position, not by a manual featured-image setting. That means the image you want to stand out needs to be placed earlier in Add Images, because order controls which photo gets the prominent tiles. A practical trick is to drag your landscape shots toward the front, since large tiles crop portrait photos more heavily.

**Q: What is the best image order for a metro gallery?**
A: The safest order is to put your strongest landscape images first, because Metro gives the early positions the most prominent tiles. The page notes that large tiles crop hardest when they are wide and short, so portrait photos can get cut off badly in those spots. That makes ordering more important here than in Grid or Masonry.

**Q: How many columns can a metro image gallery use?**
A: Metro uses its own column control instead of the usual Desktop, Tablet, and Mobile settings. In Content > Columns Manage, you get Metro Column with 3, 4, 5, or 6 columns, and 3 is the default. In the free plugin, 4 to 6 are marked PRO, so free users are limited to three columns.

**Q: What should I use instead of Metro if my images are getting cropped too much?**
A: Masonry is the better fit when you want mixed image proportions without hard cropping. The page says Metro tiles have fixed proportions and crop to fill, while Masonry never crops. That makes Masonry a better choice for portrait-heavy galleries or any set where preserving full image content matters more than getting a bold tiled look. Related: [Create an Elementor masonry image gallery](https://theplusaddons.com/docs/create-elementor-masonry-image-gallery/).

**Q: What do I need before creating a metro image gallery in Elementor?**
A: The Gallery Listing widget has to be available in The Plus Addons for Elementor first, and it needs to be switched on under ThePlus Settings > Widgets. The page also says this widget is part of The Plus Addons for Elementor and works in both Free and Pro editions for Metro. If you want a deeper control reference later, [Gallery Listing widget: settings overview](https://theplusaddons.com/docs/gallery-listing-widget-settings-overview/) covers every control in the widget.