CardGrid

Responsive flex/@container wrapper that lays cards out in a wrapping row, resizing its items at the ProductCard small/medium/full breakpoints via the @container/card-grid query name.

Aurora Terracotta

Glazed ceramic tile

Basalt Stone

Honed natural stone

Reclaimed Oak

Rift-sawn timber

Sage Linen

Woven upholstery

Usage

import { calculateColumns, CARD_GRID, CARD_GRID_RESPONSIVE, CardGrid, CardGridItem, CardGridItemProps, CardGridProps, CardGridRowMetrics, CardGridRows, CardGridRowsProps, CardGridSkeletonItem, chunkIntoRows, getCardGridMetrics } from "@desk/ui/compositions/card-grid";

Best practices

Render CardGridItem children so each card carries role="listitem" under this role="list" container — wrapping arbitrary elements loses the list semantics.
Keep this as the direct child of CardGrid so the list/listitem semantics stay intact; put the actual card inside it.
Chunk items with chunkIntoRows (using calculateColumns) before passing rows; provide a stable getItemKey (and getRowKey where rows reorder) so React reconciliation stays correct.
Render one CardGridSkeletonItem per expected card while data loads, inside the same CardGrid — this keeps list semantics and column widths stable across the loading→loaded transition.

Props

CardGrid

Prop	Type	Default	Description
ref	`Ref<HTMLDivElement>`		Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).

CardGridItem

Prop	Type	Default	Description
ref	`Ref<HTMLDivElement>`		Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).

CardGridRows

Prop	Type	Default	Description
getItemKey(required)	`(item: T) => string`
getRowKey	`(row: T[], rowIndex: number) => string`
metrics(required)	`Omit<CardGridRowMetrics, "rowWidth">`
renderAfterRow	`(props: { metrics: CardGridRowMetrics; row: T[]; rowIndex: number; }) => ReactNode`
renderItem(required)	`(props: { index: number; item: T; row: T[]; rowIndex: number; }) => ReactNode`
rows(required)	`T[][]`

CardGridSkeletonItem

Prop	Type	Default	Description
className	`string`

Also exports

constcalculateColumns
constCARD_GRID
constCARD_GRID_RESPONSIVE
interfaceCardGridItemProps
interfaceCardGridProps
interfaceCardGridRowMetrics
interfaceCardGridRowsProps
constchunkIntoRows
constgetCardGridMetrics

Composition

Builds on

ProductCard