Gutter prop, opposed to manually passing padding/ margins about grid

[pea]

This is how I imagine it

import styled from 'styled-components'
import {
  space,
  color,
  width,
  fontSize,
  flexWrap,
  flexDirection,
  alignItems,
  justifyContent,
  flex,
  order,
  alignSelf,
  themeGet
} from 'styled-system'

export const Box = styled('div')({
  boxSizing: 'border-box'
},
  space,
  color,
  width,
  fontSize,
  flex,
  order,
  alignSelf,
  props => props.css,
  props => {
    if (props.gutter) {
      return {
        padding: `${parseInt(props.theme.space[props.gutter], 10) / 2}px`
      }
    }
  }
)

Box.displayName = 'Box'

Box.propTypes = {
  ...space.propTypes,
  ...color.propTypes,
  ...width.propTypes,
  ...fontSize.propTypes,
}

const FlexWrapper = styled(Box)({
  display: 'flex'
},
  flexWrap,
  flexDirection,
  alignItems,
  justifyContent,
  props => {
    if (props.gutter) {
      return {
        margin: `${(parseInt(props.theme.space[props.gutter], 10) / 2) * -1}px;`,
        padding: 0
      }
    }
  }
)

FlexWrapper.displayName = 'Flex'

FlexWrapper.propTypes = {
  ...flexWrap.propTypes,
  ...flexDirection.propTypes,
  ...alignItems.propTypes,
  ...justifyContent.propTypes
}

export const Flex = class extends React.Component {
  renderChildren = () => {
    const { children } = this.props
    return React.Children
      .map(children, (child) => React.cloneElement(child, {
      gutter: this.props.gutter
    }))
  }

  render() {
    return <FlexWrapper {...this.props}>
      {this.renderChildren()}
    </FlexWrapper>
  }
}

<Flex flexWrap='wrap' gutter={1}>
  <Box width={1/2}>
    <Area />
  </Box>
  <Box width={1/2}>
    <Area />
  </Box>
</Flex>

[ilyaulyanov]

@pea there's a horizontal scroll bar that appears when the columns go edge to edge with the border, is there a way to fix that other than using overflow-x: hidden?

[jxnblk]

I'd recommend making a wrapper around the Flex component that handles this sort of thing by applying props to its direct children. This library is meant to be lower-level and only directly affect styles of the components themselves