feat: add columnGap and rowGap props (#49)

This PR adds the `columnGap` and `rowGap` props to enable use of the [column-gap](https://mdn.io/column-gap) and [row-gap](https://mdn.io/row-gap) properties respectively. There are no defaults for these since `gap` already included that.

Closes #44.

Author: jordanjustice

README.md

@@ -47,6 +47,8 @@ Props:
 * `columns`: The [grid-template-columns] CSS property. When a number is passed
   it is a shorthand to specify the number of columns. Default is `12`.
 * `gap`: The [grid-gap] CSS property. Default is `"8px"`.
+* `columnGap`: The [column-gap] CSS property. Not provided by default.
+* `rowGap`: The [row-gap] CSS property. Not provided by default.
 * `minRowHeight`: Minimum height of each row. Default is `"20px"`.
 * `height`: The [height] CSS property. Default is `"auto"`.
 * `flow`: The [grid-auto-flow] CSS property. Default is `"row"`.
@@ -92,6 +94,8 @@ You can use CSS grid _soon_ if you have to support the latest version of modern
 [grid-area]: https://mdn.io/grid-area
 [height]: https://mdn.io/css-height
 [grid-gap]: https://mdn.io/grid-gap
+[column-gap]: https://mdn.io/column-gap
+[row-gap]: https://mdn.io/row-gap
 [justify-content]: https://mdn.io/justify-content
 [align-content]: https://mdn.io/align-content
 [caniuse]: http://caniuse.com/#feat=css-grid

lib/Grid.js

@@ -20,6 +20,8 @@ const Grid = styled.div`
   ${({ rows }) => rows && `grid-template-rows: ${frGetter(rows)}`};
   grid-template-columns: ${({ columns = 12 }) => frGetter(columns)};
   grid-gap: ${gap};
+  ${({ columnGap }) => columnGap && `column-gap: ${columnGap}`};
+  ${({ rowGap }) => rowGap && `row-gap: ${rowGap}`};
   ${({ areas }) => areas && `grid-template-areas: ${formatAreas(areas)}`};
   ${({ justifyContent }) =>
     justifyContent && `justify-content: ${justifyContent}`};
@@ -30,6 +32,8 @@ Grid.propTypes = {
   className: PropTypes.string,
   columns: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   gap: PropTypes.string,
+  columnGap: PropTypes.string,
+  rowGap: PropTypes.string,
   height: PropTypes.string,
   minRowHeight: PropTypes.string,
   flow: PropTypes.string,

lib/__tests__/Grid.test.js

@@ -40,6 +40,16 @@ describe("<Grid />", () => {
     expect(tree).toHaveStyleRule("grid-gap", "7px");
   });
 
+  test("'columnGap' prop sets 'column-gap'", () => {
+    const tree = renderer.create(<Grid columnGap="7px" />).toJSON();
+    expect(tree).toHaveStyleRule("column-gap", "7px");
+  });
+
+  test("'rowGap' prop sets 'row-gap'", () => {
+    const tree = renderer.create(<Grid rowGap="7px" />).toJSON();
+    expect(tree).toHaveStyleRule("row-gap", "7px");
+  });
+
   test("'minRowHeight' prop sets 'grid-auto-rows'", () => {
     const tree = renderer.create(<Grid minRowHeight="7px" />).toJSON();
     expect(tree).toHaveStyleRule("grid-auto-rows", "minmax(7px,auto)");