# Card grid — layout recipe

## The idea

- Equal cards in a regular grid let readers scan many similar items at once and pick the one they want.

## Use it for

- Product and project listings
- Article and recipe indexes
- Galleries of people, places or tools

## Avoid it when

- Items differ a lot in size or importance
- There are only one or two items to show

## Regions

- Header — Names the collection and holds any search or sorting above the grid.
- Card — Shows one item with the same parts in the same order as every other card.
- Footer — Closes the grid with paging or a link to see more.

## How it reflows

- Phone: The cards stack one per row, each the full width of the screen. (1 column)
- Tablet: The cards sit two across in even rows. (2 columns)
- Desktop: The cards sit three across, with the same gap between every card and row. (3 columns)

## Principles

- Give every card the same parts in the same order
- Keep the gaps between cards equal across and down
- Add columns as the screen widens rather than stretching the cards
- Make the whole card one link, with one clear title