Layouts · Content display
Masonry Layout
Also called: Masonry, Pinterest-style layout, Waterfall layout, Staggered grid
Cards have the same width but their height follows the content, and each new card drops into the shortest column, so the whole thing looks like a staggered brick wall. Common in image communities and discovery apps.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstShow the posts list as a masonry layout: 4 columns on desktop, 3 on tablets, 2 on phones, with a 12px column gap. Cards have the same width, and their height follows the image's original aspect ratio with no cropping. Below each image, show a title of up to two lines, plus the author's avatar, username and like count. Put each new card into the shortest column. Reserve space for each image based on its aspect ratio before it loads, and automatically load more when the user scrolls to the bottom.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Masonry Layout is what you need.
Use Masonry Layout when
- The content is mostly images with different aspect ratios that you don't want to crop
- Users are casually browsing to discover things they like and don't care about the order
- There are lots of items that need to keep loading with infinite scroll
Pick something else when
Items have a clear order (time, ranking) and users need to view them in that order
Users need to compare several records field by field
Use insteadData TableImages share the same aspect ratio and you want rows and columns neatly aligned
Use insteadCard GridThe content is mostly text and most items have no image
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Built with CSS columns (column-count), so items flow top to bottom one column at a time and the newest content ends up at the bottom of the second column
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
No height reserved for images, so cards jump when the images finish loading and the whole column reshuffles
- 03
Admin data shown as masonry, so finding one record means hunting all over the screen
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
The page is split into several equal-width columns. Cards of different heights fill into whichever column is currently the shortest, so the column bottoms don't line up and the whole thing looks like a staggered brick wall.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
Masonry splits the page into a fixed number of columns (like 4 on desktop and 2 on phones). Every card has the same width, and its height depends on the image's original aspect ratio and the length of the text. Each new card always goes into the column that's currently the shortest, so the whole thing looks staggered, like a brick wall. The home pages of Pinterest, Unsplash and similar sites use this layout.
The upside is that it keeps every image's original aspect ratio with no cropping, and the page has almost no gaps, so one screen fits lots of content. Paired with infinite scroll, it works well for "just browsing around".
The cost is that the reading order isn't clear. Items jump left and right, so it's hard for users to go through them in order, hard to remember where something was, and impossible to compare them by field. A Card Grid has equal heights, aligned rows and a strong sense of order; masonry is freer and saves more space, but it only suits content that people browse visually.
Developer infoTerm ID, DOM cues, match priority
- Term ID
layout-masonry- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026