Stack Layout

Add vertical space between child elements using CSS Grid.

One

Two

Three

Four

<div
  sx={{
    display: 'grid',
    gridGap: 4,
  }}>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div><div
  sx={{
    display: 'grid',
    gridGap: 4,
  }}>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

/** @jsxImportSource theme-ui */
export default function Stack({ gap = 4, ...props }) => (
  <div
    {...props}
    sx={{
      display: 'grid',
      gridGap: gap,
    }}
  />
)