Stacks¶

marimo.hstack ¶

hstack(
    items: Sequence[object],
    *,
    justify: Literal[
        "start",
        "center",
        "end",
        "space-between",
        "space-around",
    ] = "space-between",
    align: Optional[
        Literal["start", "end", "center", "stretch"]
    ] = None,
    wrap: bool = False,
    gap: float = 0.5,
    widths: Optional[
        Literal["equal"] | Sequence[float]
    ] = None
) -> Html

Stack items horizontally, in a row.

Combine with vstack to build a grid.

Examples:

Build a row of items:

# Build a row of items
mo.hstack([mo.md("..."), mo.ui.text_area()])

Build a row of items with equal width:

mo.hstack([mo.md("..."), mo.ui.text_area()], widths="equal")

Have one item stretch to fill the available space, while another fits its content:

mo.hstack(
    [mo.plain_text("..."), mo.ui.text_area(full_width=True)],
    widths=[0, 1],
)

Build a grid:

# Build a grid.
mo.hstack(
    [
        mo.vstack([mo.md("..."), mo.ui.text_area()]),
        mo.vstack([mo.ui.checkbox(), mo.ui.text(), mo.ui.date()]),
    ]
)

PARAMETER	DESCRIPTION
`items`	A list of items. TYPE: `Sequence[object]`
`justify`	Justify items horizontally: start, center, end, space-between, or space-around. Defaults to "space-between". TYPE: `Literal['start', 'center', 'end', 'space-between', 'space-around']` DEFAULT: `'space-between'`
`align`	Align items vertically: start, end, center, or stretch. TYPE: `Optional[Literal['start', 'end', 'center', 'stretch']]` DEFAULT: `None`
`wrap`	Wrap items or not. Defaults to False. TYPE: `bool` DEFAULT: `False`
`gap`	Gap between items as a float in rem. 1rem is 16px by default. Defaults to 0.5. TYPE: `float` DEFAULT: `0.5`
`widths`	"equal" to give items equal width; or a list of relative widths with same length as `items`, eg, [1, 2] means the second item is twice as wide as the first; or None for a sensible default. TYPE: `Optional[Literal['equal'] \| Sequence[float]]` DEFAULT: `None`

RETURNS	DESCRIPTION
`Html`	An Html object. TYPE: `Html`

marimo.vstack ¶

vstack(
    items: Sequence[object],
    *,
    align: Optional[
        Literal["start", "end", "center", "stretch"]
    ] = None,
    justify: Literal[
        "start",
        "center",
        "end",
        "space-between",
        "space-around",
    ] = "start",
    gap: float = 0.5,
    heights: Optional[
        Literal["equal"] | Sequence[float]
    ] = None
) -> Html

Stack items vertically, in a column.

Combine with hstack to build a grid of items.

Examples:

Build a column of items:

# Build a column of items
mo.vstack([mo.md("..."), mo.ui.text_area()])

Build a grid:

# Build a grid.
mo.vstack(
    [
        mo.hstack([mo.md("..."), mo.ui.text_area()]),
        mo.hstack([mo.ui.checkbox(), mo.ui.text(), mo.ui.date()]),
    ]
)

PARAMETER	DESCRIPTION
`items`	A list of items. TYPE: `Sequence[object]`
`align`	Align items horizontally: start, end, center, or stretch. TYPE: `Optional[Literal['start', 'end', 'center', 'stretch']]` DEFAULT: `None`
`justify`	Justify items vertically: start, center, end, space-between, or space-around. Defaults to "start". TYPE: `Literal['start', 'center', 'end', 'space-between', 'space-around']` DEFAULT: `'start'`
`gap`	Gap between items as a float in rem. 1rem is 16px by default. Defaults to 0.5. TYPE: `float` DEFAULT: `0.5`
`heights`	"equal" to give items equal height; or a list of relative heights with same length as `items`, eg, [1, 2] means the second item is twice as tall as the first; or None for a sensible default. TYPE: `Optional[Literal['equal'] \| Sequence[float]]` DEFAULT: `None`

RETURNS	DESCRIPTION
`Html`	An Html object. TYPE: `Html`