Staggered columns
Columns of items of different heights, without rows lining up. Shows many pictures of mixed shapes without cropping them.
Good for: Portfolios, photo walls, inspiration boards.
Weak for: Reading order, which is unclear; keyboard users jump around.
Two columns on phones, three to five on desktop.
The look, in Stylogeny
- Column grid: Vertical columns structure text and image; vertical placement is free.
- All-over field: No focal point; the whole surface is filled evenly, like a textile.
- Repetition & rhythm: Repeated units create a visual cadence.
How it is found
In a wireframe: A grid of columns that each stack two or more pictures of different shapes. No part in the catalogue does this yet: a gap.
On a real page: At 1280 px, three or more columns of pictures of equal width whose tops mostly don’t line up across columns, and whose heights differ.