GridItem - manywidgets

Wrap a Grid child to control how many columns/rows its cell spans, or to place it into a named template_areas region. A bare (unwrapped) child stays a plain 1x1 cell, exactly like before; GridItem is opt-in.

Import¶

from manywidgets import Grid, GridItem

Example¶

One cell spanning 2 columns and 2 rows, in a 4-column grid. Every cell here is a plain bordered Stat card labeled with its own span, so the grid lines are visible directly from the cell borders:

from manywidgets import Grid, GridItem, Stat

Grid(
    GridItem(Stat(label="col_span=2, row_span=2"), col_span=2, row_span=2),
    Stat(label="1x1"),
    Stat(label="1x1"),
    Stat(label="1x1"),
    Stat(label="1x1"),
    columns=4, gap="12px",
)

Named areas (set template_areas on the Grid, and area= on each item) place a cell by name instead of row-major flow. Combine with template_rows and an explicit height on the Grid to give a middle row (here 1fr) more space than the thin header/footer bars; see Grid’s asymmetric-columns section for why height matters:

Grid(
    GridItem(Stat(label="header"), area="header"),
    GridItem(Stat(label="sidebar"), area="sidebar"),
    GridItem(Stat(label="main"), area="main"),
    GridItem(Stat(label="footer"), area="footer"),
    columns="200px 1fr", gap="12px",
    template_areas='"header header" "sidebar main" "footer footer"',
    template_rows="auto 1fr auto",
    height="300px",
)

API¶

Trait	Type	Default	Description
`child`	Instance	—	The wrapped widget.
`col_span`	Int	`1`	Number of grid columns this cell spans.
`row_span`	Int	`1`	Number of grid rows this cell spans.
`area`	Unicode	`''`	Named grid-template-area; requires the parent Grid’s template_areas.
`widget_id`	Unicode	`''`	Stable unique id used for cross-widget linking (auto-assigned).

area takes precedence over col_span/row_span when the parent Grid has template_areas set.