---
title: "How to Create WordPress Photo Gallery Grid?"
url: https://nexterwp.com/docs/create-wordpress-photo-gallery-grid/
date: 2023-06-17
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "A plain grid is still the clearest way to show a set of photos. The Media Listing block in Nexter Blocks Pro builds one from your Media Library images, with..."
image: https://nexterwp.com/wp-content/uploads/2024/05/create-wordpress-photo-gallery-grid-1024x519.jpg
word_count: 340
---

# How to Create WordPress Photo Gallery Grid?

## Key Takeaways

- Media Listing block in Nexter Blocks Pro builds a photo grid from Media Library images, and the column count is set separately for desktop, tablet, and mobile.
- Grid layout keeps every tile in a row the same height, so rows line up even when photos have different shapes, but tall photos are cropped at the top and bottom.
- Clicking a photo opens it in the lightbox unless Popup Layout is set to No, and grid images added under Normal do not have individual titles or links.

A plain grid is still the clearest way to show a set of photos.

The Media Listing block in Nexter Blocks Pro builds one from your Media Library images, with the column count set separately for each screen size.

*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**, leave **Select Option** on **Normal** and pick your images.

![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 **Grid**.

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

- In **Columns Manage**, set **Columns**, then use the device icons to set a smaller count for tablet and mobile.

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

- Adjust **Columns Gap/Space** for the spacing between tiles, then publish.

![A photo gallery laid out as an even grid](https://nexterwp.com/wp-content/uploads/2026/09/media-listing-fe-grid.webp)

## How It Behaves

- Every tile in a row is the same height, so rows line up even when the photos are different shapes.- Each device keeps its own column count, so a four column desktop gallery can show one column on a phone.- Clicking a photo opens it in the lightbox unless you set **Popup Layout** to **No**.

## Limitations

- **Pro only.**- Tiles are cropped to a shared height, so tall photos lose some of the top and bottom. Use [masonry](https://nexterwp.com/docs/create-a-masonry-image-gallery-in-wordpress/) if you want each photo shown whole.- Grid images added under **Normal** have no individual titles or links. Switch to [repeater content](https://nexterwp.com/docs/create-wordpress-image-gallery-with-repeater/) for that.

## Troubleshooting

### The gallery shows one photo per row

You are looking at the mobile column count. Switch the device icon next to **Columns** to desktop and set the count there.

### Photos look cropped

That is how the grid keeps rows even. Either accept the crop, raise **Display Image Size** in **Extra Options**, or switch to masonry.

## Related Docs

- [Masonry image gallery](https://nexterwp.com/docs/create-a-masonry-image-gallery-in-wordpress/)- [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/)