Add gap prop to Flex component

Is your feature request related to a problem? Please describe. I was looking into how to make a Stack layout, and found this recipe: https://theme-ui.com/recipes/stack. This recipe won’t work if the user needs/wants to support IE11, as that browser doesn’t have support for grid-gap. Also, I think having to be aware of using either display: flex or grid to implement a Stack is not the ideal development experience. I think that things like display: flex; or display: grid; should be an implementation detail in most cases.

Describe the solution you’d like Having a Stack component that handles those implementation details and just lets you specify a Space that belongs to your space scale, will be a flexible option that still behaves under your theme constraints. Something that looks like:

// Items are spaced out using the element with index 3 on your spaces scale
<Stack space={3}>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</Stack>

Not sure if that component fits into the principles of this library, but I saw an opportunity, and if it’s wanted here I’d love to implement it! 😄

Describe alternatives you’ve considered We could do something similar to what’s described here: https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/, just to have the Grid component translate the gridGap prop as Autoprefixer does.

Additional context I’ve been using the Stack component for a while and found it incredibly useful and reusable. I was heavily inspired by the Stack component on this design system by the team at Seek (https://seek-oss.github.io/braid-design-system/components/Stack)

[joe-bell]

To those wanting a Stack, I built this primarily for use with Theme UI: https://github.com/joe-bell/raam

Hope it helps

[jxnblk]

I think there are two separate issues that are being somewhat conflated here: the component API and the implementation.

1. I understand that CSS Grid Layout isn’t as widely supported, and there could be something in the implementation that helps with fallbacks for legacy browsers.
2. While I generally am not opposed to the Stack convention/API - the Grid component is intended as a complete replacement for that. I’d like to hear some rationale for why adding Stack in addition to Grid would make sense from an API standpoint.

Again, I’m not opposed to adding a Stack (it could be an extension of the existing Grid component), but just want to make sure I understand the reasons for adding it in