# byChildCount

> Applies `build(count)` to an element whose direct children number exactly `count`, for every count up to BALANCED_MAX_COUNT; a longer run keeps the rules written outside it.

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

Applies `build(count)` to an element whose direct children number exactly
`count`, for every count up to BALANCED_MAX_COUNT; a longer run keeps the
rules written outside it.

## Signature

```ts
byChildCount<Node extends Element = Element>(build: (count: number) => UtilityInput<Node>): UtilityMixin<Node>[]
```

Returns: One quantity rule per count.

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `build` | `(count: number) => UtilityInput<Node>` | Styles for a run of that many children. |

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