balancedColumns

The column count that splits count items into the fewest rows of at most columns while keeping the rows as even as possible.

tsx

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

Signature

typescript

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

Returns columns between 1 and columns.

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

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

Constant

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

typescript

const ICON_TILE_SIDE = 10

Interface

Options accepted by cardGrid.

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

Interface

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

Member	Type	Required	Description
`query`	`string`	Yes	Container size query, such as `(36rem <= width < 48rem)`.
`columns`	`number`	Yes	The most items one row holds in this range.
`columnsFor`	`(count: number) => number`	No	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.