feat: support grid-gap row/columns (#39)

Author: azz

README.md

@@ -46,7 +46,7 @@ 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`: Gap between cells. Default is `"8px"`.
+* `gap`: The [grid-gap] CSS property. Default is `"8px"`.
 * `minRowHeight`: Minimum height of each row. Default is `"20px"`.
 * `flow`: The [grid-auto-flow] CSS property. Default is `"row"`.
 * `rows`: The [grid-template-rows] CSS property. When a number is passed
@@ -89,6 +89,7 @@ You can use CSS grid _soon_ if you have to support the latest version of modern
 [grid-template-rows]: https://mdn.io/grid-template-rows
 [grid-template-areas]: https://mdn.io/grid-template-areas
 [grid-area]: https://mdn.io/grid-area
+[grid-gap]: https://mdn.io/grid-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

@@ -6,7 +6,7 @@ const autoRows = ({ minRowHeight = "20px" }) => `minmax(${minRowHeight}, auto)`;
 const frGetter = value =>
   typeof value === "number" ? `repeat(${value}, 1fr)` : value;
 
-const gap = ({ gap = "8px" }) => `${gap} ${gap}`;
+const gap = ({ gap = "8px" }) => gap;
 
 const flow = ({ flow = "row" }) => flow;
 

lib/__tests__/Grid.test.js

@@ -37,7 +37,7 @@ describe("<Grid />", () => {
 
   test("'gap' prop sets 'grid-gap'", () => {
     const tree = renderer.create(<Grid gap="7px" />).toJSON();
-    expect(tree).toHaveStyleRule("grid-gap", "7px 7px");
+    expect(tree).toHaveStyleRule("grid-gap", "7px");
   });
 
   test("'minRowHeight' prop sets 'grid-auto-rows'", () => {

lib/__tests__/__snapshots__/Grid.test.js.snap

@@ -6,7 +6,7 @@ exports[`<Grid /> matches snapshot with default args 1`] = `
   grid-auto-flow: row;
   grid-auto-rows: minmax(20px,auto);
   grid-template-columns: repeat(12,1fr);
-  grid-gap: 8px 8px;
+  grid-gap: 8px;
 }
 
 <div