Masonry
You might say
The images are all different heights—do not crop them into one size, just let new ones tuck under the short ones.
Pack cards of different heights into equal-width columnsOn galleries and inspiration feeds, images vary in height; masonry lets each new card fill the shortest gap so no full row is left blank. The trade-off is that reading order runs down columns instead of across rows, and once the layout collapses to a single column on phones, the content order needs its own acceptance check.
Masonry Layout
Masonry≠Card Grid
Card Grid keeps strict rows and equal-height cards for scanning and comparison; Masonry drops row alignment for compactness and suits browsing.
Masonry≠Bento Grid
Bento Grid assigns cell sizes to express a designed priority; Masonry positions come from an automatic packing rule and express no priority.
When to use it
- Gallery walls where photos and illustrations keep their natural ratios
- Inspiration and asset feeds built for continuous browsingKeep scrolling to load more
- Product or case covers with inconsistent sizes that should stay compactNoise-canceling headphones¥ 899Eye-care desk lamp¥ 199
- Growing collections where packing saves more height than tidy rows
When NOT to use it
- Content with a strict order, such as steps or timelinesStep 1Step 2Step 4 lands ahead of Step 3
- Row-by-row comparison of similar fields, where misalignment hurts
- Keeping multiple columns on phones until cards become too narrow
- Long-form article lists, where packing breaks continuous reading
Anatomy
CardFills in
Columns keep equal widths while heights vary freely
Cards keep the natural ratio of their content instead of being cropped
The next card joins the shortest column, which is also why the order shuffles
Variants
Three Columns
The common column count for desktop galleries and feeds
Two Columns
On narrow screens or when cards need larger previews
Single Column
The default phone form, where content returns to its original order
Typical use cases
Photography wall
Illustration feed
236 saved ideas · keep scrolling to load more
Product covers
Template library
Further reading