Stacks

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

Stack items horizontally, in a row.

Combine with vstack to build a grid.

Example.

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

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

Args.

• items: A list of items.

• justify: Justify items horizontally: start, center, end, space-between, or space-around.

• align: Align items vertically: start, end, center, or stretch.

• wrap: Wrap items or not.

• gap: Gap between items as a float in rem. 1rem is 16px by default.

• 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

Returns.

• An Html object.

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

Stack items vertically, in a column.

Combine with hstack to build a grid of items.

Example.

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

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

Args.

• items: A list of items.

• align: Align items horizontally: start, end, center, or stretch.

• justify: Justify items vertically: start, center, end,

• gap: Gap between items as a float in rem. 1rem is 16px by default.

• 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

Returns.

• An Html object.