# balancedColumns

> The column count that splits `count` items into the fewest rows of at most `columns` while keeping the rows as even as possible: 6 in at most 4 is 3 + 3, 5 in at most 4 is 3 + 2.

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

The column count that splits `count` items into the fewest rows of at most
`columns` while keeping the rows as even as possible: 6 in at most 4 is 3 + 3,
5 in at most 4 is 3 + 2.

## Signature

```ts
balancedColumns(count: number, columns: number): number
```

Returns: Columns between 1 and `columns`.

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `count` | `number` | Items in the run. |
| `columns` | `number` | The most items one row may hold. |

## 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. |