balancedGrid

Lays direct children in rows that are full or centred.

tsx

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

Usage

Lays direct children in rows that are full or centred: each step picks the even column count for the run (balancedColumns), and a shorter last row sits in the middle at one column per item. Tracks are doubled so a centred row can start half a column in; the element must leave grid-template-columns and the children's grid-column to this mixin.

Signature

typescript

balancedGrid<Node extends Element = Element>(containerName: string, steps: ReadonlyArray<BalancedGridStep>, rowStart?: UtilityInput<Node>): UtilityMixin<Node>

Returns one mixin for the element whose children are the items.

Parameters

Parameter	Type	Required	Description
`containerName`	`string`	Yes	Named sizing container the steps query.
`steps`	`ReadonlyArray<BalancedGridStep>`	Yes	Container ranges, each with the most items a row holds there.
`rowStart`	`UtilityInput<Node>`	No	Extra styles for the first item of a centred last row, such as the edge it now exposes.

Examples

tsx

<div mix={[grid(), balancedGrid("ui-logos", [{ query: "(width < 30rem)", columns: 2 }, { query: "(width >= 30rem)", columns: 4 }])]}>{marks}</div>

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

Constant

ICON_TILE_SIDE

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

CardGridOptions

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.