Design VocabularyDesign vocabulary · Edition 01

VOCABULARY / ENTRY

Card Grid

card-grid

Add to comparison +
Layout & information architectureScope: Pagecard-grid · v0.1.0

Arrange a set of identically structured cards in a repeating row-and-column grid, where each card represents one content unit that can be opened and typically combines an image, a title, a summary, and an action.

Illustration · Editorial artwork, no interactive specimen yet
A fictional FIELDNOTES page with six identically structured cards in three columns and two rows, each with an image area, a title bar, two lines of text, and a small action button.
A fictional FIELDNOTES page with six identically structured cards in three columns and two rows, each with an image area, a title bar, two lines of text, and a small action button.

Recognizing it

  • A repeating row-and-column grid whose column count changes with width
  • Every card shares one structure: image area, title, short text, action
  • Each card maps to one content unit the user can enter

Concept boundary

This is a page-level layout, not the card component itself. Unlike a Bento grid, the cards are homogeneous and usually the same size; hierarchy is not created through block size. Cards with differing structures or unpredictable field positions lose their scannability.

When to consider it

  • Browsing a set of parallel, same-type items recognized by image or title, such as works, products, or articles
  • Each item needs an image-and-text summary together with its entry point
  • The number of items grows with content and needs automatic wrapping and a responsive column count

When to be cautious

  • Users need to compare many items field by field; a table or vertical list is easier to scan
  • Content needs a clear primary-secondary hierarchy; consider a Bento grid or master-detail instead
  • Items are a single line of text with no image; the card container only adds noise

Tradeoff

Image and text side by side aid recognition and browsing, but compared with a list, card positions are less predictable for the eye, and inconsistent internal structure makes comparison harder. Whole-card clicks and secondary actions inside the card require deliberate focus and click-target handling.

Conditional rules · Editorial advice

When Cards in the grid carry items of the same typeMustKeep the kind, order, and position of fields identical on every card so users can scan and compare item by item.
When The whole card is clickableMustKeep exactly one focusable primary link per card and extend the click area with styling; make secondary actions inside the card separately focusable and never nested in the primary link.
When The column count changes with the viewportRecommendedChange only the visual arrangement; do not use grid placement to change the logical order of cards.

Related entries

Bento Grid ↗Conditional alternative · Content has a clear primary-secondary hierarchy

Bento expresses hierarchy through varied block sizes; a card grid expresses parallel items through homogeneous cards.

Master–Detail ↗Works with · Opening a card should show its detail on the same page

The card grid can serve as the master list while a detail panel holds the selected item.

Similarity ↗Explains · Deciding the visual structure of the cards

Homogeneous cards rely on the law of similarity so users recognize them as the same kind of item.

Sources and what they support

Nielsen Norman Group · Cards: UI-Component Definition ↗

Defines a card as a linked container for a few related pieces of information representing one conceptual unit, and notes that card layouts are less scannable than lists and poor for comparison when card structure is unpredictable.

Retrieved: 2026-09-15
Inclusive Components · Cards ↗

Recommends one descriptive primary link per card as its focus stop, extending the click area with pseudo-content rather than wrapping the whole card in a link, and using Grid or Flexbox for equal-height cards.

Retrieved: 2026-09-15
MDN · Grid layout and accessibility ↗

States that visual rearrangement in grid layout does not change document order or keyboard traversal order, and that grid placement may only be used for visual, not logical, reordering.

Retrieved: 2026-09-15

Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.

Type extensions and implementation notes

No operable specimen yet; the illustration is an editorial sketch. When applied to a product, still verify that card fields are truly homogeneous, how many focus stops each card has, conflicts between whole-card clicks and secondary actions, and the reading order in a single column.

{
  "states": [
    "multi-column",
    "single-column"
  ],
  "a11y": [
    "One primary focus stop per card, with secondary actions separately focusable",
    "DOM order matches the visual reading order"
  ],
  "motion": "None"
}

Open the Agent JSON file for this entryThis file repeats every field of this entry verbatim and adds its sources, archive status, and editorial scope.