Card grid

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

See it live

A labelled wireframe of the pattern, made for this explorer. Switch the width to watch its regions reflow from phone to desktop.

Copy the idea

Take the pattern with you as a brief for a person or as instructions for an AI assistant: its regions, how it reflows and the rules for using it.

# 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

Lay out the page with the "Card grid" pattern.

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

It suits:
- Product and project listings
- Article and recipe indexes
- Galleries of people, places or tools
It is a poor fit when:
- Items differ a lot in size or importance
- There are only one or two items to show

Build the page from these 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.

Reflow it at each width:
- 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)

Follow these 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

Apply the idea and the rules above; do not copy any existing website.

Download brief (.md)

Regions

The parts of the page and the job each one does.

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 390 · 1 column: The cards stack one per row, each the full width of the screen.
Tablet 768 · 2 columns: The cards sit two across in even rows.
Desktop 1440 · 3 columns: The cards sit three across, with the same gap between every card and row.

Where it fits

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

Principles

The rules that keep the pattern working at every width.

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