Skip to content

Staggered ​

Alternating columns offset against each other — a calm, magazine-like rhythm.

Staggered is a column layout where every other column is pushed down, so the tiles interlock instead of lining up in rows. It reads slower and more deliberately than a grid, which is exactly the point.

When to use it ​

  • Editorial and lookbook galleries.
  • Brand pages where a strict grid feels too corporate.
  • Any set where you want rhythm without Masonry's raggedness.

Its own settings ​

ControlWhat it doesDefault
ColumnsHow many columns. Responsive, 1–8.4 desktop / 3 tablet / 2 mobile
Image HeightOriginal keeps each image's own proportions. Custom fixes every tile to one height.Custom
Image Height (px)(Custom only) That height, 80–600.280
Preserve Layout GapsHow far the alternating columns are offset, as a percentage of the image height. Responsive, 0–100.50 %

Why Custom is the default ​

The stagger only reads as a clean alternating edge when every tile is the same height. Under Original, a row is as tall as its tallest image, so shorter tiles leave holes and the offset varies from tile to tile — the pattern dissolves.

Use Original when your images are already close in proportion and you'd rather not crop; use Custom (the default) for the look the layout exists for.

Preserve Layout Gaps ​

At 0 % the columns line up and Staggered looks like Grid. At 50 % — the default — alternate columns sit half an image lower, which is the classic look. Above that the offset grows and the gallery starts to read as two separate bands.

Shared settings ​

Staggered supports every shared panel. See the gallery block reference for gaps and order, Image & Video Settings, Content Settings, Image Click Action, Filter & Search, Ajax Pagination, Motion Effects and Advanced.

Things worth knowing ​

Captions work, and the offset accounts for them. With Classic content on, the stagger is measured from the image height rather than the whole tile, so two tiles with captions of different lengths still line up on the same pitch.

On a phone, drop to one column. At one column there's nothing to stagger against, and that's fine — the layout degrades to a simple vertical run, which is what you want on a narrow screen anyway.

Original height and the offset. Under Original, the offset is a proportion of each tile rather than a fixed pitch, because with tiles of different heights there's no single pitch to use. Expect a looser, less mechanical stagger.

Other layouts ​