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.
Repeat a useful content unit within a consistent grid.
- 01Repeatable unit
Every card uses the same order for its important information.
- 02Consistent gutter
Regular gaps distinguish items without adding visual noise.
- 03Aligned grid
Shared tracks make the collection easy to scan and compare.
How the pattern works
A card grid breaks a collection into self-contained units. Consistent boundaries, spacing, and information order help people compare products, articles, plans, or tools without relearning the interface for every item.
Start with the anatomy of one card: what it is, why it matters, and what happens next. Repeat that hierarchy across the grid. Equal rows are useful for comparison, but the layout should still tolerate different titles and content lengths.
Where it fits—and what to consider
A useful choice when
- People browse or compare items with similar information.
- A collection needs to scale beyond a few entries.
- Each item has a clear destination or action.
Be deliberate about
- Inconsistent card anatomy makes comparisons harder.
- Too many nested actions can make a card confusing to use.
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
Use repeated tracks and consistent gaps. Equal-height cards can align actions, but should not hide meaningful information to force a perfect row.
On narrower screens
Reduce the number of columns as soon as titles, images, and controls become cramped. Keep the same information order within every card.
Build the structure
- 01Design one card around a clear question or task.
- 02Repeat its hierarchy and spacing across the collection.
- 03Use a minimum readable card width to determine the column count.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
gap: 1.5rem;
}
.card {
display: flex;
flex-direction: column;
}
.card__action { margin-top: auto; }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
Design three product cards with different title lengths. Check whether the product name, price, and next action are still easy to compare.
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.