Stack is a layout component that provides an abstraction over the flexbox gap property

Stack is a single axis layout component enabling you to space items evenly within it using the gap prop and change the direction of content with direction. In an ideal world this component would be redundant as gap would be widely supported when used with display: flex; unfortunately browser support isn’t great with Safari being the last major browser yet to implement it. @supports() would usually enable us to progressively enable this property but there’s no way to test when it’s used alongside flexbox, as gap is also used in display: grid. Until we gain greater browser support, this Stack component should provide a similar output.

<Stack gap="2" direction="column">
<Box css={{ bg: '$primary', size: '$5' }} />
<Box css={{ bg: '$primary', size: '$5' }} />
<Box css={{ bg: '$primary', size: '$5' }} />
</Stack>
<Stack gap="2" direction="row">
<Box css={{ bg: '$primary', size: '$5' }} />
<Box css={{ bg: '$primary', size: '$5' }} />
<Box css={{ bg: '$primary', size: '$5' }} />
</Stack>

API Reference

PropTypeDefaultRequired
direction
"row" | "row-reverse" | "column"
row

-

wrap
"wrap" | "no-wrap" | "wrap-reverse"
wrap

-

justify
boolean
start

-

align
boolean

-

-

gap
number | false | true | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "false"
2

-

cssCSSProperties

-

-

asJSX.IntrinsicElements

-

-