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.