Use card grid for multi-column visual browsing of peer objects; use card list for single-column rich reading, collection for a named managed set, and table for aligned attribute comparison.
Use card grid for multi-column visual browsing of peer objects; use card list for single-column rich reading, collection for a named managed set, and table for aligned attribute comparison.
Practice the judgment: Imagine this situation: A card grid asks users to compare prices and deadlines, but those values appear in different vertical positions on every card. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Card grid | Card list | Collection | Table |
|---|---|---|---|---|
| UI or UX | UI + UX - Responsive multi-column grid of peer object cards | UI + UX - Single-column sequence of bounded rich object summaries | UI + UX - Named, purposeful set of items with collection-level metadata and membership behavior | UI + UX - Semantic row-and-column data comparison surface |
| UI guidance | Arrange peer object cards in a responsive grid with stable tile widths, predictable gutters, consistent preview aspect ratios, titles, compact metadata, state labels, and one primary action area. | Render each item as a bounded card with a stable anatomy: preview or icon, title, concise summary, metadata, status, and one clear primary action or activation target. | Render a collection header with the collection title, concise description, item count, owner or source, visibility, last updated state, and primary collection actions before the item surface. | Render a table with a specific caption or heading, visible column headers, optional row headers, aligned values, consistent row actions, and enough spacing for scanability. |
| UX guidance | Use card grid when users need visual browsing, light comparison, and quick selection across many peer objects that can be understood from compact card summaries. | Preserve predictable card anatomy, action ownership, selected state, and visible result counts as users sort, filter, expand, select, or load more cards. | Use collection when the set itself is meaningful and users need to save, curate, share, revisit, sequence, or manage item membership. | Use tables when aligned columns help users compare records, find exceptions, audit values, or triage work faster than opening each item. |
| Good UI | A course catalog grid shows four cards per row on desktop, each with the same image ratio, course title, provider, level, duration, saved state, and Enroll action. | A grant-opportunity card shows program name, eligibility summary, deadline, award range, status, agency, and a labelled Save action in the same position on every card. | A launch-assets collection shows title, description, 4 items, owner, shared-with-team state, sections for Read first and Assets, and item cards with type, status, and remove actions. | A payment review table has the caption June vendor payments, headers Vendor, Status, Due date, Amount, and Action, right-aligned amounts, and row actions labelled by vendor. |
| Bad UI | Each card has different metadata order, different action placement, and different height, making the grid look rich but hard to scan. | Every card uses a different layout, so deadline, owner, status, and actions appear in different places. | A shared collection says 12 items but only 8 render because four are private or unavailable. | Mobile stacking removes headers and turns rows into unlabeled paragraphs. |
| Good UX | A shopper filters a product grid to In stock, switches from comfortable to compact density, selects three items, and the selected count and item positions remain understandable. | A user filters opportunities to Closing soon, saves two cards, expands one summary, changes sort order, and the saved count and card identities remain clear. | A user adds a training module to a cloud-migration collection, reorders it into the first section, shares the collection link, and sees a confirmation that the item remains in the collection. | A user sorts by Amount descending, filters to Pending, moves to page 2, and the table keeps its caption, active sort, active filter, row count, and selected payment context. |
| Bad UX | A user filters to saved assets and loses selection because the product tracked selected cards by visible position rather than object ID. | A user tries to compare award amounts across cards, but each amount appears in a different location and some cards hide it behind expansion. | A user filters a collection to videos, removes one visible item, and later discovers the product only cleared the filter instead of removing the item from the collection. | Mobile stacking removes headers and turns rows into unlabeled paragraphs. |
| Best fit | Users browse peer objects where visual preview, compact identity, and quick first-pass selection matter. | Users need to browse rich object summaries with preview, summary text, metadata, status, and actions. | Users need to save, curate, share, revisit, sequence, or maintain explicit items as a meaningful set. | Records share comparable attributes that users need to scan in aligned columns. |
| Avoid when | Users need dense scanning of many text-heavy records. | The content is dense and homogeneous enough for a compact list view. | The set is only a temporary search result or filtered query. | The task depends on rich previews, imagery, or uneven metadata. |
| Required state | Default grid with heading or label, result count, active view controls, and at least one full row of peer cards. | Default card list with heading or label, result count, and visible card summaries. | Default collection state with title, description, owner or source, item count, visibility, updated time, and primary action. | Default table state with caption, visible headers, row values, and result count or context. |
| Accessibility burden | Give the grid or list a heading, result count, and concise description of active filters or sort order. | Use a real list or region with a heading for the card sequence. | Use a heading and concise description that name the collection and explain its purpose before item navigation begins. | Use native table semantics for tabular data rather than div-only rows. |
| Common misuse | Using card grid as decorative chrome for rows that need dense scanning or aligned comparison. | Using cards as decorative wrappers for dense rows. | Mixing search results, recommendations, recent history, saved items, and editorial links under one collection heading. | Using table markup to create page columns or layout spacing. |