Row

A horizontal flex container. Children are placed side by side. Use width modifiers (1/2, 1/3, etc.) on children to control their share of the row.

Basic usage

row:
  card 1/2:
    ## Left
  card 1/2:
    ## Right

Three columns

row:
  1/3 card:
    ## One third
  1/3 card:
    ## One third
  1/3 card:
    ## One third

Mixed widths

row:
  1/4 card:
    ## Narrow
  3/4 card:
    ## Wide

Children without a fraction

Children without a fraction share the remaining space equally.

row:
  card:
    ## Auto width
  card:
    ## Auto width
  card:
    ## Auto width

Any element, not just cards

row: works with any element — buttons, inputs, badges, and more.

row:
  blue primary button: Save
  outline button: Cancel

Reference

Fraction	Width
1/2	50%
1/3	33.3%
2/3	66.6%
1/4	25%
3/4	75%
full	100%