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>

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