feat: add gutter to grid

Author: gregberge

docs/Grid.md

@@ -4,7 +4,11 @@ Using `xs`, `sm`, `md`, `lg` and `xl` you can set size using responsive breakpoi
 
 ```js
 <Row>
-  <Col xs>1</Col>
-  <Col xs>2</Col>
+  <Col xs style={{ border: '1px solid black' }}>
+    1
+  </Col>
+  <Col xs style={{ border: '1px solid black' }}>
+    2
+  </Col>
 </Row>
 ```

src/Col.js

@@ -49,13 +49,6 @@ function generateBreakPoint(breakpoint) {
   `
 }
 
-const addProp = (propName, attribute, transform = x => x) => props =>
-  typeof props[propName] !== 'undefined'
-    ? css`
-        ${attribute || propName}: ${transform(props[propName])};
-      `
-    : null
-
 const ColComponent = ({ className, xs, sm, md, lg, xl, ...props }) => (
   <div
     className={classNames(
@@ -74,24 +67,14 @@ const ColComponent = ({ className, xs, sm, md, lg, xl, ...props }) => (
       },
       className,
     )}
-    {...omit(props, [
-      'theme',
-      'alignItems',
-      'alignContent',
-      'alignSelf',
-      'justifyContent',
-    ])}
+    {...omit(props, ['theme'])}
   />
 )
 
 /** @component */
 const Col = styled(handleRef(ColComponent))`
-  display: flex;
-
-  ${addProp('alignItems', 'align-items')};
-  ${addProp('alignContent', 'align-content')};
-  ${addProp('alignSelf', 'align-self')};
-  ${addProp('justifyContent', 'justify-content')};
+  padding-left: 15px;
+  padding-right: 15px;
   ${props => Object.keys(props.theme.breakPoints).map(generateBreakPoint)};
 `
 
@@ -101,10 +84,6 @@ Col.propTypes = {
   md: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),
   lg: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),
   xl: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),
-  alignItems: PropTypes.string,
-  alignContent: PropTypes.string,
-  alignSelf: PropTypes.string,
-  justifyContent: PropTypes.string,
 }
 
 Col.defaultProps = {

src/Row.js

@@ -10,6 +10,8 @@ const Row = styled(RowComponent)`
   flex-grow: 1;
   flex-wrap: wrap;
   display: flex;
+  margin-right: -15px;
+  margin-left: -15px;
 `
 
 /** @component */