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) → 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.

Returns.

• An Html object.

marimo.vstack(items: Sequence[object], align: Literal['start', 'end', 'center', 'stretch'] | None = None, gap: float = 0.5) → 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.

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

Returns.

• An Html object.