Skip to content

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