Start with the shape
Read the figure
The numbered parts explain the decisions behind the composition. Read the relationships first; the colors are simply there to make the structure visible.
Let variable-height items share a compact visual collection.
- 01Variable heights
Different content proportions remain visible instead of using one fixed crop.
- 02Column packing
Items occupy available column space without rigid shared rows.
- 03Reading order
The illustrated A–F sequence flows down each column in a CSS-columns implementation.
How the pattern works
Masonry accommodates images and cards with different heights instead of forcing them into uniform rows. It is especially useful for visual discovery, where the shape of each item is part of the content.
The implementation affects the reading order. CSS columns flow down a column before moving to the next, while other packing methods can create a different visual order. Keep the document order meaningful and check how keyboard focus moves through the collection.
Where it fits—and what to consider
A useful choice when
- Visual items naturally have different proportions.
- Discovery matters more than comparing aligned fields.
- The collection has a meaningful and accessible source order.
Be deliberate about
- Visual order and keyboard order can diverge.
- A regular card grid is easier when people need to compare prices or specifications.
Adapt the relationship, not just the size
A useful mobile layout preserves the task and content order while changing how the regions share space.
On wider screens
Add columns while each item remains readable. Keep gaps consistent and let media retain its intended proportions.
On narrower screens
Use one or two columns according to content width. With CSS columns, preserve a sensible top-to-bottom source order and avoid splitting an item across columns.
Build the structure
- 01Choose masonry because the content benefits from variable heights.
- 02Select a packing method and inspect its source order.
- 03Test keyboard navigation and long captions at each column count.
.gallery { columns: 1; column-gap: 1rem; }
.gallery > * {
break-inside: avoid;
margin-bottom: 1rem;
}
@media (min-width: 36rem) { .gallery { columns: 2; } }
@media (min-width: 64rem) { .gallery { columns: 3; } }Adapt the content, spacing, and breakpoints to your page. This example illustrates the structure, not a complete application.
A small design exercise
Try it yourself
Arrange six images with mixed aspect ratios. Label their document order A–F, then trace the path a keyboard user would follow.
See a worked example
Inspect a complete page using this pattern, then connect its content regions back to the annotated figure.
Open the example page
Put the pattern into practice
Use the layout prompt as a starting brief, then adapt it to your real content and the decisions covered in this guide.
Read the AI layout prompt
Select the text below and copy it into your AI tool. Replace example content with your own.