row

Places children side by side, splitting the width equally. On narrow screens they wrap; sibling cards share a height per line by default.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props

gap

pad

align

wrap

Props

gapnumberSpace between children in pixels (default 10).10

padnumberInner padding in pixels (default 0).0

aligntop · center · bottomVertical alignment of children: top, center or bottom.center

wrapbooleanMove children onto more lines when they don't fit side by side (default true). Set false to always keep them on one line.true

ifconditionShow only when this expression is true, e.g. if=done or if={count>0}. Every element takes it.—

tipstringA short explanation shown on hover, keyboard focus or a tap, e.g. tip="Orders not yet shipped": for a term or a number some people won't know, instead of more words on screen. It makes the element a Tab stop if it isn't one. Every element takes it.—

Children: any elements.

For your model

The exact guide entry a model gets for row, generated from the same definition.

  row  — Places children side by side, splitting the width equally. On narrow screens they wrap; sibling cards share a height per line by default.
    gap=<number>  Space between children in pixels (default 10).
    pad=<number>  Inner padding in pixels (default 0).
    align=<top|center|bottom>  Vertical alignment of children: top, center or bottom.
    wrap=<boolean>  Move children onto more lines when they don't fit side by side (default true). Set false to always keep them on one line.
    children: any elements
    example:
      row gap=10
        button "Cancel" variant=secondary
        button "Save"

More layout

column overlap grid card list list-item accordion divider spacer each timeline step carousel scroll

All layout elements on one page →