Masonry fits visual work whose size is part of the content
Aliases: masonry · Pinterest layout · staggered columns
What it is
Photographs, shots, pins: aspect ratio is part of the content. Cropping to one tile cuts composition; letterboxing wastes the column. Masonry packs into the current shortest column so each image keeps its height and vertical holes get filled. It fits browse-and-discover. It does not fit comparing prices or reading titles as a list.
An equal-height card grid is a different tool: that frames heterogeneous objects. Masonry’s variable is the media’s own height. If height jitter comes from two-line versus five-line titles, that is ragged type, not a reason to masonry.
Why it happens
An equal-height grid has two moves: crop, or letterbox. Crop harms composition; letterbox becomes a string of cavities in a narrow column. Masonry drops the row and runs n independent columns, inserting into whichever is shortest. Packing efficiency comes from not aligning row height. The cost is that there is no row — reading order and positional stability are later bills.
“Visual work” is the constraint: people need to see the object’s real shape. If product shots are all captured 4:3, masonry has no media to protect and is only decorating with stagger.
Where it stops holding
Search results that must be read in relevance order will put item 1 and item 2 in different columns at different y, and the rank order is spatially scrambled. Tables, mail, settings: no. Video with a fixed control bar has its height locked by chrome, so masonry adds nothing.
With a single column, masonry degenerates to a stack and there is no packing to discuss. The holes it exists to fill appear when column count grows with width.
Applying it
- Ask: if every item were forced to one aspect, would a composition you must see be lost? Only then turn masonry on. Otherwise use an equal-height grid or a list.
- Keep metadata (price, shop) to one or two lines so copy is not the main height variable.
- How to check: take 30 real assets. One version cropped to 1:1, one masonried. Ask people to point at crops that lost the subject. If they almost never can, masonry has no media reason. If they can, check whether the masonry version is also staggering on copy length — if so, cap copy at a fixed line count and let only the image set height.