change gutter attr to only effect column gap

README.md

@@ -45,10 +45,10 @@ Simply add a `<grid-container>` element to your page. All first level children o
 ## Attributes
 ### `<grid-container>`
 #### gutter
-The `gutter` attribute defines the gutter or gap in pixels between the columns and rows of the cells in the grid. They can either be set to one value e.g. `gutter="10"` (which will translate into a `10px` gap) or to a specific value per breakpoint e.g. `gutter="10s 20m 25l"`.
+The `gutter` attribute defines the gutter or gap in pixels between the **columns** of the grid. It can either be set to one value e.g. `gutter="10"` (which will translate into a `10px` gap) or to a specific value per breakpoint e.g. `gutter="10s 20m 25l"`.
 
 #### rowgutter
-The `rowgutter` attribute defines the gutter or gap in pixels between the rows of the grid. It is useful when you want to have different values for the row and column gutter and can be set either a general value e.g. `10` or a specific value per breakpoint e.g. `gutter="10s 20m 25l"` exactly like the `gutter` attribute.
+The `rowgutter` attribute defines the gutter or gap in pixels between the **rows** of the grid. It can either be set to a general value e.g. `10` or a specific value per breakpoint e.g. `gutter="10s 20m 25l"` exactly like the `gutter` attribute.
 
 #### columns
 The `columns` attribute defines the number of columns in the grid e.g. `columns="12"`. If you want to change the number of columns per breakpoint you can define breakpoint specific sizes by appending the breakpoint to the column number: `columns="1s 2m 6l"`.

cssgenerator.js

@@ -15,8 +15,8 @@ let style = () => {
       result += `  :host([size="${breakpoint}"]){
       grid-template-columns: repeat(var(--grid-columns-${breakpoint}, var(--grid-columns, auto-fill)), 1fr);
       grid-template-rows: repeat(var(--grid-rows-${breakpoint}, var(--grid-rows, none)), 1fr);
-      grid-gap: var(--grid-gutter-${breakpoint}, var(--grid-gutter, 0));
-      grid-row-gap: var(--grid-row-gutter-${breakpoint}, var(--grid-row-gutter, var(--grid-gutter, 0)));
+      grid-column-gap: var(--grid-gutter-${breakpoint}, var(--grid-gutter, 0));
+      grid-row-gap: var(--grid-row-gutter-${breakpoint}, var(--grid-row-gutter, 0));
     }\n`
     })
     return result
@@ -64,8 +64,8 @@ let style = () => {
     width: 100%;
     grid-template-columns: repeat(var(--grid-columns, auto-fill), 1fr);
     grid-template-rows: repeat(var(--grid-rows, none), 1fr);
-    grid-gap: var(--grid-gutter, 0);
-    grid-row-gap: var(--grid-row-gutter, var(--grid-gutter, 0));
+    grid-column-gap: var(--grid-gutter, 0);
+    grid-row-gap: var(--grid-row-gutter, 0);
   }
 ${host()}
   :host([autoflow]){