# cardGrid

> Lays a grid's direct children as cards or a mosaic in one class, so the cell fill, edge and per-corner radii never compete across cascade layers.

```ts
import { cardGrid } from "@sdxc/ui/landing";
```

Lays a grid's direct children as cards or a mosaic in one class, so the
cell fill, edge and per-corner radii never compete across cascade layers.
A lone last cell spans the rest of its row at every step, unless the cells set
their own `data-span` or the grid is a `list`. In `cards`, the
corners on the grid's outer edge take `--ui-landing-card-radius-outer`;
once any cell carries `data-corner`, the `lg` step rounds only the corners
those cells list, so a page with custom spans names its own outer corners.

## Signature

```ts
cardGrid<Node extends Element = Element>({
	columns,
	variant,
	containerName,
}: CardGridOptions): UtilityMixin<Node>
```

Returns: One mixin for the element whose children are the cells.

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `{ columns, variant, containerName, }` | `CardGridOptions` |  |

## Examples

```tsx
<div mix={[cardGrid({ columns: 3, variant: "cards", containerName: "ui-landing-bento" })]}>{cells}</div>
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/landing` too.

### ICON_TILE_SIDE

Side of a claim's glyph tile on the spacing scale (2.5rem), shared by every claim icon.

#### Signature

```ts
const ICON_TILE_SIDE = 10
```

### CardGridOptions

Options accepted by cardGrid.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `columns` | `number` | Columns at the `lg` container; the grid shows one track on a phone and two from `md`. |
| `variant` | `"cards" \| "mosaic" \| "list"` | Separate raised cards, one hairline-ruled mosaic box, or an un-carded `list`. |
| `containerName` | `string` | Named sizing container on the grid's host that the column steps query. |

### BalancedGridStep

One container range of a balancedGrid: the query that selects it and the
most items one row holds there.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `query` | `string` | Container size query, such as `(36rem <= width < 48rem)`. |
| `columns` | `number` | The most items one row holds in this range. |
| `columnsFor?` | `(count: number) => number` | Columns for a run of exactly `count` items in this range, where the even split would still leave a short row the layout should not show. |