Grid

Horizontal placement of the container within its parent.

Page margins, in lines (preferred) or spacing tokens. A bare value sets all four sides.

Largest width the type area may reach.

Facing-page side. Swaps which physical edge `inside`/`outside` land on.

Element to render.

Extra classes merged after the component's own, so a consumer rule wins.

Per-slot overrides: `style` is a Panda style object merged into the slot's classes, `props` are extra HTML attributes spread onto it.

Horizontal placement of the grid BOX within its parent — the grid's own margin, not its children's. Contrast `alignItems`.

Block alignment of every field within its row span, set once on the grid. Unset, CSS Grid's own `stretch` applies and nothing changes; a single field overrides it with its own `alignSelf`.

Quantise a field's height to whole lines when its content overflows. Client-side only and deliberately opt-in — it trades layout stability for rhythm. See `observeRasterOverflow`.

Columns across the type area.

Row track generation. `"auto"` gives content-height rows with a one-line floor — the only mode that works for auto-placed content. `"lines"` makes every track exactly one line, for deliberate field placement; `"fields"` makes auto-placement land on field boundaries.

Gutter between cells, in lines (preferred) or a spacing token. Applies to both axes — in the exact row modes the vertical gutter is one line track, so a matching horizontal gutter makes the raster isotropic.

The baseline step. Omit to INHERIT the surrounding rhythm — which is what a nested grid almost always wants. `"reset"` re-pins it to the token.

Field height in text LINES — the `k` in `height(S) = (S·k + S − 1)` lines.

Page margins around the raster, in lines (preferred) or spacing tokens. Usually left to a parent `Container`. A bare value sets all four sides.

Largest width the grid may reach. Usually left to a parent `Container`, which owns the type area; set it only on a standalone grid.

Facing-page side. Swaps which physical edge `inside`/`outside` land on.

Apply the baseline rhythm scope to the subtree (`data-rhythm`).

Fixed canvas height in FIELDS. Omit for a content-height grid.

The grid's fields — normally `<GridItem>` elements, plus an optional `<GridGuides>`.

Element to render.

Extra classes merged after the component's own, so a consumer rule wins.

Bound reference to the root element (`bind:this`). Typed loosely as `Element` to stay compatible with `svelte:element`.

Per-slot overrides: `style` is a Panda style object merged into the slot's classes, `props` are extra HTML attributes spread onto it.

The field's own block alignment within its row span. Overrides the grid's `alignItems`. Unset, the item follows the grid's `alignItems` (and CSS Grid's own `stretch` when that is unset too).

1-based column the field starts at. Omit to auto-place.

Columns to span. `"full"` spans the whole type area (`1 / -1`).

Escape hatch: place by LINE track instead of by field, within `flow="lines"`. Wins over `row`/`rowSpan`. Use it when a composition is designed against the baseline itself rather than against fields — a masthead, a poster, a cover. Field placement cannot express "start on line 7", because a field row always begins a whole field-plus-gutter into the grid.

Line tracks to span, paired with `line`.

What happens when content is taller than the span. CSS cannot round an intrinsic size, so `"visible"` keeps the raster exact and lets the overflow show — the only option with no layout shift. `"scroll"` reserves the scrollbar gutter unconditionally, `"auto"` only when it overflows.

1-based FIELD row the item starts at. Omit to auto-place.

FIELD rows to span — not line tracks. The connect converts.

Element to render.

Extra classes merged after the component's own, so a consumer rule wins.

Per-slot overrides: `style` is a Panda style object merged into the slot's classes, `props` are extra HTML attributes spread onto it.

Which layers to draw: the column/baseline rules, the field bands, or both.

Colour of the field/column bands.

Colour of the 1px rules.

Thickness of the rules.

Element to render.

Extra classes merged after the component's own, so a consumer rule wins.

Per-slot overrides: `style` is a Panda style object merged into the slot's classes, `props` are extra HTML attributes spread onto it.