Masonry vs. Bento Grid
Masonry packs cards of different heights into columns. A bento grid uses planned card sizes to show what matters most.
Use masonry for many separate items with different heights. Use a bento grid for a small set whose size shows importance.
See what each pattern does
Try each example. Then read about the job it is made to do.
Masonry Layout
A masonry layout packs items of different heights into columns. Items fill vertical gaps without sharing row lines.
An inspiration board fits tall and wide cards into balanced columns with little empty space.
- Use it when
- Use it for browsing pictures when strict row-by-row comparison doesn't matter.
- Do not use it when
- Avoid it when source order, keyboard order, or the expected scan path gets confusing.
- Name used in code
columns / masonry
Bento Grid
A bento grid packs tiles of different sizes into one layout. Larger spans show which content matters most.
A product overview gives the live chart a large tile. Less important numbers get smaller tiles.
- Use it when
- Use it when content has a true order of importance. Let the layout show that order.
- Do not use it when
- Never span tiles at random. It can break reading order and add style without meaning.
- Name used in code
grid-column: span n
Quick comparison
| UI pattern | Best for | Not for | Name used in code |
|---|---|---|---|
| Masonry Layout | Use it for browsing pictures when strict row-by-row comparison doesn't matter. | Avoid it when source order, keyboard order, or the expected scan path gets confusing. | columns / masonry |
| Bento Grid | Use it when content has a true order of importance. Let the layout show that order. | Never span tiles at random. It can break reading order and add style without meaning. | grid-column: span n |
Before you ship
- 01
Write down what the person needs to do.
- 02
Test the keyboard, focus, touch, zoom, loading, empty, and error states.
- 03
Make sure people can get the same information without hover or motion.
- 04
Test with real content on both small and large screens.
Comparison request you can copy
Copy this when your team needs help choosing between the patterns.
Choose the best pattern from Masonry Layout, Bento Grid for our real user flow. Use this rule: Masonry packs cards of different heights into columns. A bento grid uses planned card sizes to show what matters most. Write down the task, amount of content, and cost of stopping the flow. Check keyboard, touch, loading, error, and reduced-motion behavior. Explain your choice, then build the smallest accessible version with the project's design system.