Masonry layout
A grid where every column is the same width but items keep their own heights, so rows never line up. The Pinterest look.
See it
What it is
Masonry keeps the columns a fixed width but lets each item keep its own height, then drops the next item into whichever column is currently shortest. Rows stop existing, the vertical gaps get packed tight, and you end up with a wall of staggered bricks, which is why Pinterest, Unsplash, and most moodboard tools use it. Shortest-column placement keeps the columns close in height, but the bottom edge still comes out uneven. The name comes from David DeSandro's Masonry library, the 2010 jQuery plugin that made the pattern a default.
Reach for it when the items are genuinely different shapes and their order does not carry meaning: photos, screenshots, references, inspiration. If every card is the same aspect ratio, you want a plain grid instead, and if the items are ranked, masonry actively hurts, because reading order depends entirely on the implementation: some fill column by column, some place across and down, and the visual order rarely matches the source order either way.
Gotcha: the cheap CSS route, column-count with items set to break-inside: avoid, fills column one to the bottom before starting column two. Item 2 ends up below item 1 rather than beside it, which scrambles both the visual order and the tab order. Native CSS masonry in Grid is still landing across browsers, so for now it is a JS library or accepting the column ordering. Second gotcha: images without width and height attributes make the whole wall relayout as they load, so reserve the aspect ratio up front.
Ask AI for it
Build a masonry gallery with equal-width columns and items of varying height, each new item placed in the shortest column so the columns end up close in height. Implement it with the project's existing masonry library or a JavaScript measure-and-position pass; do not use CSS multi-column layout and do not use experimental native CSS masonry. Recalculate positions after images decode and on viewport resize. Use 4 columns above 1280px, 3 above 900px, 2 above 600px, 1 below that, with a 16px gutter. Give every image an explicit aspect-ratio so nothing jumps while loading, use rounded corners and no card chrome, and keep DOM order matching the intended reading order so keyboard and screen reader users get the same sequence.