Basic usage

The HorizontalStack and VerticalStack components can be used to manage one-dimensional layout of immediate children along the horizontal or vertical axis respectively.

Spacing between children can be adjusted using the responsive gap prop. The value can be from the spacing scale, a number (converted to px) or a string with units.

Horizontal stack

Inline layout

Responsive gap

Vertical stack

Inline layout

Responsive gap

Props

HorizontalStack
System Props

  • COMMON
  • TYPOGRAPHY
  • BORDER
  • LAYOUT
  • POSITION
  • FLEX
  • GRID
  • Learn More
NameTypeDescription
inlineboolean-
gradientResponsiveValue<TLengthStyledSystem, Required<Theme<TLengthStyledSystem>>>-
VerticalStack
System Props

  • COMMON
  • TYPOGRAPHY
  • BORDER
  • LAYOUT
  • POSITION
  • FLEX
  • GRID
  • Learn More
NameTypeDescription
inlineboolean-
gradientResponsiveValue<TLengthStyledSystem, Required<Theme<TLengthStyledSystem>>>-