Layouts Overview

Seven layouts, one block. What each one is good at, and how to choose.

Shaped Gallery has one block. Which of the seven layouts it uses is a setting, so you're never committed — switch at any time and your images, order, categories, captions and every shared setting come with you.

Automatic JustifiedRows of even height, widths balanced so each row fills the container exactly.GridEqual square tiles in a fixed number of columns.MasonryColumns of uneven height, packed so no gaps are left.MetroA mosaic built around oversized featured tiles.ThumbnailsOne main image synced to a thumbnail strip, on any of five positions.StaggeredAlternating columns offset against each other.Perspective ScrollingA 3D marquee with mouse tilt and parallax.

Choosing one

Start from the shape of your content, not the look:

If your images are…	Use
A mix of portrait and landscape, and you want tidy rows	Automatic Justified
All roughly the same shape, and order matters	Grid
Tall and short mixed, and you'd rather not crop	Masonry
A set where a few deserve more space	Metro
Meant to be looked at one at a time	Thumbnails
A calm, magazine-ish column rhythm	Staggered
A showpiece — a hero band, a brand moment	Perspective Scrolling

How they differ underneath

Three of the seven behave differently enough to be worth knowing about before you commit.

	How it's built	What follows
Grid · Metro · Staggered	Pure CSS Grid	Laid out by the browser. Nothing to measure, nothing to wait for.
Justified · Masonry	CSS + a small measuring script	Needs each image's real proportions, so it reflows when the container resizes.
Thumbnails · Perspective	Their own runtime	A slider and a 3D marquee — each owns its item model, so some panels don't apply.

Every layout renders the same markup. The difference is CSS and, for the last four, a little JavaScript — which is why switching layouts doesn't rebuild your gallery.

What each layout supports

	Justified	Grid	Masonry	Metro	Thumbnails	Staggered	Perspective
Columns control	—	✅	✅	—	—	✅	✅
Horizontal / Vertical Gap	✅	✅	✅	✅	(own gap)	✅	✅
Titles & descriptions	✅ Classic + Overlay	✅ Classic + Overlay	✅ Classic + Overlay	✅ Classic + Overlay	Overlay only	✅ Classic + Overlay	Overlay only
Image Click Action	✅	✅	✅	✅	❌	✅	✅
Filter & Search	✅	✅	✅	✅	❌	✅	❌
Ajax Pagination	✅	✅	✅	✅	❌	✅	❌
Motion Effects	✅	✅	✅	✅	❌	✅	❌
Random order	✅	✅	✅	✅	❌	✅	❌
Lightbox	✅	✅	✅	✅	❌	✅	✅
Hover animations	✅	✅	✅	✅	✅	✅	✅
Watermark	✅	✅	✅	✅	✅	✅	✅

Thumbnails and Perspective are the two exceptions, and for a reason: each builds its own item model — a slider's slides, a marquee's cloned columns — so filtering, paging and per-item entrance animations would have nothing coherent to act on. Rather than showing controls that save and do nothing, both hide them.

Switching layout

Select the gallery and click Change Layout on the block toolbar. A compact grid of swatches appears; pick one.

Everything carries over. Settings that only exist on the layout you left (a justified row height, a perspective rotation) stay stored and come back if you switch back.

Content Display Style survives the round trip

Move a gallery with Classic captions to Thumbnails or Perspective and it draws them as an overlay — but it doesn't rewrite your choice. Move it back and Classic returns.

Responsive behaviour

Every layout is responsive, and most sizes carry separate desktop, tablet and phone values. Look for the device switcher beside a control's label; changing it changes which device you're editing, not which one you're previewing. More →

The single most common mobile fix is Columns: four across looks fine on a laptop and terrible on a phone. Set it to 1 or 2 for mobile.

Where to go next

• The full inspector reference — every panel, every default
• Adding media
• Best Practices