diff --git a/README.md b/README.md
index 450710e..e6973e5 100644
--- a/README.md
+++ b/README.md
@@ -1,19 +1,11 @@
 # CSS Grid Tailwind Plugin
 
-Isolated from [https://github.com/tailwindcss/plugin-examples](https://github.com/tailwindcss/plugin-examples)
+## Configuration options
 
-[View demo](https://tailwindcss.github.io/plugin-examples/#css-grid) · [View source](https://github.com/tailwindcss/plugin-examples/blob/master/plugins/css-grid/index.js)
-
-In `plugins/css-grid/index.js` you'll find an example of a plugin that adds new utilities for using [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout).
-
-![](https://user-images.githubusercontent.com/4323180/37525015-fb5c78f2-2901-11e8-97be-18c66d12bf84.png)
-
-It exposes four configuration options:
-
-- `grids`, for specifying all of the grid sizes you'd like to generate
-- `gaps`, for specifying the gap sizes you'd like to generate
+- `grids` for specifying all of the grid sizes you'd like to generate
+- `gaps` for specifying the gap sizes you'd like to generate
 - `autoMinWidths` for specifying min width to columns using auto-fit and minmax
-- `variants`, for specifying which variants to generate
+- `variants` for specifying which variants to generate
 
 ```js
 module.exports = {
@@ -27,11 +19,13 @@ module.exports = {
         0: '0',
         4: '1rem',
         8: '2rem',
+        '4-x': '1rem',
+        '4-y': '1rem',
       },
       autoMinWidths: {
         '16': '4rem',
         '24': '6rem',
-        '300px': '300px'
+        '300px': '300px',
       },
       variants: ['responsive'],
     }),
@@ -41,16 +35,26 @@ module.exports = {
 
 With zero configuration, it will generate grids from 1 to 12 columns in size, no gap sizes, and `responsive` variants for each new utility.
 
+## Generated classes
+
 The plugin generates the following sets of classes:
 
-- `.grid`, for setting `display: grid` on an element
-- `.grid-columns-{size}`, for specifying the number of columns in the grid
-- `.col-span-{columns}`, for specifying how wide a cell should be
-- `.grid-gap-{size}`, for specifying the size of the gap between columns/rows
-- `.grid-automin-{size}`, for applying the minimum width of the columns using auto-fit and minmax (the max is 1fr)
-- `.col-start-{line}` and `.col-end-{line}`, for specifying a cell's start and end points explicitly (useful for reordering cells or leaving gaps)
-- `.row-span-{columns}`, for specifying how tall a cell should be
-- `.row-start-{line}` and `.row-end-{line}`, for specifying a cell's start and end points explicitly (useful for reordering cells or leaving gaps)
+- `.grid` for setting `display: grid` on an element
+- `.grid-columns-{size}` for specifying the number of columns in the grid
+- `.col-span-{columns}` for specifying how many columns a cell should span
+- `.grid-gap-{size}` for specifying the size of the gap between columns/rows, if the name ends with -x or -y `grid-[column/row]-gap` will be used
+- `.grid-automin-{size}` for applying the minimum width of the columns using auto-fit and minmax (the max is 1fr)
+- `.col-start-{line}` and `.col-end-{line}` for specifying a cell's start and end grid lines explicitly (useful for reordering cells or leaving gaps)
+- `.row-span-{columns}` for specifying how many rows a cell should span
+- `.row-start-{line}` and `.row-end-{line}`, for specifying a cell's start and end grid lines explicitly (useful for reordering cells or leaving gaps)
 - `.grid-dense` applies `grid-auto-flow: dense`
 
-It's not really practical to expose all of the power of CSS Grid through utilities, but this plugin is a good example of using CSS Grid to replace a cell-only float or Flexbox grid.
\ No newline at end of file
+It's not really practical to expose all of the power of CSS Grid through utilities, but this plugin is a good example of using CSS Grid to replace a cell-only float or Flexbox grid.
+
+---
+
+### Credit
+
+This repo was originally isolated from [https://github.com/tailwindcss/plugin-examples](https://github.com/tailwindcss/plugin-examples) to publish to npm.
+
+Credit and thanks to [@adamwathan](https://github.com/adamwathan) - [view original demo](https://tailwindcss.github.io/plugin-examples/#css-grid)
\ No newline at end of file
diff --git a/index.js b/index.js
index 37f9e1d..7d4e953 100644
--- a/index.js
+++ b/index.js
@@ -1,54 +1,77 @@
 const _ = require('lodash')
 
 module.exports = function ({
-  grids = _.range(1, 12),
+  grids = _.range(1, 13),
   gaps = {},
   autoMinWidths = {},
-  variants = ['responsive']
+  variants = ['responsive'],
 }) {
-  return function ({ e, addUtilities }) {
-    addUtilities([
-      { '.grid': { display: 'grid' } },
-      { '.grid-dense': { gridAutoFlow: 'dense' } },
-      ..._.map(gaps, (size, name) => ({
-        [`.${e(`grid-gap-${name}`)}`]: { gridGap: size },
-      })),
-      ...grids.map(columns => ({
-        [`.grid-columns-${columns}`]: {
-          gridTemplateColumns: `repeat(${columns}, 1fr)`,
-        }
-      })),
-      ..._.map(autoMinWidths, (size, name) => ({
-        [`.${e(`grid-automin-${name}`)}`]: {
-          gridTemplateColumns: `repeat(auto-fit, minmax(${size}, 1fr))`
+  return function ({
+    e,
+    addUtilities
+  }) {
+    addUtilities(
+      [{
+          '.grid': {
+            display: 'grid',
+          },
         },
-      })),
-      ..._.range(1, _.max(grids) + 1).map(span => ({
-        [`.col-span-${span}`]: {
-          gridColumnStart: `span ${span}`,
-        }
-      })),
-      ..._.range(1, _.max(grids) + 2).map(line => ({
-        [`.col-start-${line}`]: {
-          gridColumnStart: `${line}`,
+        {
+          '.grid-dense': {
+            gridAutoFlow: 'dense',
+          },
         },
-        [`.col-end-${line}`]: {
-          gridColumnEnd: `${line}`,
-        },
-      })),
-      ..._.range(1, _.max(grids) + 1).map(span => ({
-        [`.row-span-${span}`]: {
-          gridRowStart: `span ${span}`,
-        }
-      })),
-      ..._.range(1, _.max(grids) + 2).map(line => ({
-        [`.row-start-${line}`]: {
-          gridRowStart: `${line}`,
-        },
-        [`.row-end-${line}`]: {
-          gridRowEnd: `${line}`,
-        },
-      })),
-    ], variants)
+        ..._.map(gaps, (size, name) => {
+          const gridGap = name.endsWith('-y') ?
+            'gridRowGap' :
+            name.endsWith('-x') ?
+            'gridColumnGap' :
+            'gridGap'
+
+          return {
+            [`.${e(`grid-gap-${name}`)}`]: {
+              [gridGap]: size,
+            },
+          }
+        }),
+        ...grids.map(columns => ({
+          [`.grid-columns-${columns}`]: {
+            gridTemplateColumns: `repeat(${columns}, 1fr)`,
+          },
+        })),
+        ..._.map(autoMinWidths, (size, name) => ({
+          [`.${e(`grid-automin-${name}`)}`]: {
+            gridTemplateColumns: `repeat(auto-fit, minmax(${size}, 1fr))`,
+          },
+        })),
+        ..._.range(1, _.max(grids) + 1).map(span => ({
+          [`.col-span-${span}`]: {
+            gridColumnStart: `span ${span}`,
+          },
+        })),
+        ..._.range(1, _.max(grids) + 2).map(line => ({
+          [`.col-start-${line}`]: {
+            gridColumnStart: `${line}`,
+          },
+          [`.col-end-${line}`]: {
+            gridColumnEnd: `${line}`,
+          },
+        })),
+        ..._.range(1, _.max(grids) + 1).map(span => ({
+          [`.row-span-${span}`]: {
+            gridRowStart: `span ${span}`,
+          },
+        })),
+        ..._.range(1, _.max(grids) + 2).map(line => ({
+          [`.row-start-${line}`]: {
+            gridRowStart: `${line}`,
+          },
+          [`.row-end-${line}`]: {
+            gridRowEnd: `${line}`,
+          },
+        })),
+      ],
+      variants,
+    )
   }
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 3b95d26..768d0d9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-grid",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "CSS grid plugin for tailwindcss framework",
   "main": "index.js",
   "scripts": {
@@ -25,4 +25,4 @@
   "devDependencies": {
     "lodash": "^4.17.5"
   }
-}
+}
\ No newline at end of file