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