diff --git a/docs/.vuepress/components/Preview.vue b/docs/.vuepress/components/Preview.vue
index 5866473..27db31e 100644
--- a/docs/.vuepress/components/Preview.vue
+++ b/docs/.vuepress/components/Preview.vue
@@ -5,7 +5,7 @@
     </div>
     <div
       :style="{
-        height: `${iframeHeight * iframeScale}px`
+        height: `${iframeHeight}px`
       }">
       <div class="preview__loader" v-if="isLoading" />
       <iframe
@@ -68,14 +68,6 @@ import { log } from 'util';
         `;
       },
     },
-    watch: {
-      /**
-       * Update the iframe sizes when the iframe scale changes
-       */
-      iframeScale() {
-        this.setIframeHeight();
-      },
-    },
     async mounted() {
       // Get the content before anything
       this.styles = await this.getStyles();
diff --git a/docs/plugins/debug-outline.md b/docs/plugins/debug-outline.md
index 6dc0288..3f8f158 100644
--- a/docs/plugins/debug-outline.md
+++ b/docs/plugins/debug-outline.md
@@ -1,3 +1,75 @@
+---
+sidebar: auto
+prev: false
+next: ./grid.html
+---
+
 # Debug Outline
 
-@todo
+The debug outline plugins helps you visualise you HTML structure by adding colored outlines to all of them.
+
+## Configuration
+
+The plugin can be configured with the `theme.debugOutline` property:
+
+```js{3}
+module.exports = {
+  theme: {
+    debugOutline: false,
+  },
+};
+```
+
+### `debugOutline`
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether the plugin is active or not.
+
+## Examples
+
+<Preview>
+  <div class="debug">
+    <div class="grid">
+      <div class="grid-row mb-2">
+        <div class="grid-col-3">
+          <div class="h-4 text-grey-600 bg-white flex items-center justify-center">3</div>
+        </div>
+        <div class="grid-col-3">
+          <div class="h-4 text-grey-600 bg-white flex items-center justify-center">3</div>
+        </div>
+        <div class="grid-col-3">
+          <div class="h-4 text-grey-600 bg-white flex items-center justify-center">3</div>
+        </div>
+        <div class="grid-col-3">
+          <div class="h-4 text-grey-600 bg-white flex items-center justify-center">3</div>
+        </div>
+      </div>
+      <div class="grid-row mb-2">
+        <div class="grid-col-4">
+          <div class="h-4 text-grey-600 bg-white flex items-center justify-center">4</div>
+        </div>
+        <div class="grid-col-4">
+          <div class="h-4 text-grey-600 bg-white flex items-center justify-center">4</div>
+        </div>
+        <div class="grid-col-4">
+          <div class="h-4 text-grey-600 bg-white flex items-center justify-center">4</div>
+        </div>
+      </div>
+      <div class="grid-row mb-2">
+        <div class="grid-col-6">
+          <div class="h-4 text-grey-600 bg-white flex items-center justify-center">6</div>
+        </div>
+        <div class="grid-col-6">
+          <div class="h-4 text-grey-600 bg-white flex items-center justify-center">6</div>
+        </div>
+      </div>
+      <div class="grid-row mb-2">
+        <div class="grid-col-12">
+          <div class="h-4 text-grey-600 bg-white flex items-center justify-center">12</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</Preview>
diff --git a/docs/plugins/grid.md b/docs/plugins/grid.md
index fd030ab..d30d118 100644
--- a/docs/plugins/grid.md
+++ b/docs/plugins/grid.md
@@ -1,14 +1,111 @@
 ---
 sidebar: auto
+prev: ./debug-outline.html
+next: ./typography.html
 ---
 
 # Grid
 
-@todo introduction
+The grid plugin creates component classes to easily work with a 12 columns layout.
+
+## Configuration
+
+The plugin can be configured with the `theme.gridPlugin` property:
+
+```js{3-7}
+module.exports = {
+  theme: {
+    gridPlugin: {
+      columns: 12,
+      gutterWidth: 1,
+      gutterUnit: 'rem',
+    },
+  },
+};
+```
+
+### `columns`
+
+- Type: `Number`
+- Default: `12`
+
+The total number of columns.
+
+### `gutterWidth`
+
+- Type: `[ Number, String, Object ]`
+- Default: `1`
+
+The width of the grid's gutters provided as a **unitless number**. You can configure different widths per breakpoint by providing an object with the following schema:
+
+```js
+{
+  default: <value>,
+  ...<screen>: <value,
+}
+```
+
+The following configuration...
+
+```js
+module.exports = {
+  theme: {
+    screens: {
+      s: '600px',
+      m: '1200px',
+      l: '1800px',
+    },
+    gridPlugin: {
+      gutterWidth: {
+        default: 2,
+        m: 4,
+      },
+    },
+  },
+};
+```
+...would generate a grid component with gutters of size `2` for viewports from `0` to `1200px` and of size `4` for viewports from `1200px` and up.
+
+### `gutterUnit`
+
+- Type: `String`
+- Default: `'rem'`
+
+The CSS unit used for the gutters.
 
 ## Classes
 
-@todo
+### Container
+
+|       Class       | Description | Variants |
+|-------------------|-------------|----------|
+| `.grid`           | @todo       | `[]`     |
+| `.grid-nested`    | @todo       | `[]`     |
+| `.grid-no-gutter` | @todo       | `[]`     |
+
+### Row
+
+|        Class        | Description |   Variants   |
+|---------------------|-------------|--------------|
+| `.grid-row`         | @todo       | `responsive` |
+| `.grid-row-start`   | @todo       | `responsive` |
+| `.grid-row-center`  | @todo       | `responsive` |
+| `.grid-row-end`     | @todo       | `responsive` |
+| `.grid-row-stretch` | @todo       | `responsive` |
+
+### Columns
+
+|        Class         | Description |   Variants   |
+|----------------------|-------------|--------------|
+| `.grid-pull-<count>` | @todo       | `responsive` |
+| `.grid-push-<count>` | @todo       | `responsive` |
+| `.grid-col-<count>`  | @todo       | `responsive` |
+| `.grid-col-center`   | @todo       | `responsive` |
+| `.grid-col-clear`    | @todo       | `responsive` |
+| `.grid-col-left`     | @todo       | `responsive` |
+| `.grid-col-no-clear` | @todo       | `responsive` |
+| `.grid-col-right`    | @todo       | `responsive` |
+
 
 ## Examples
 
diff --git a/docs/plugins/typography.md b/docs/plugins/typography.md
index e9be4fe..fad7572 100644
--- a/docs/plugins/typography.md
+++ b/docs/plugins/typography.md
@@ -1,5 +1,7 @@
 ---
 sidebar: auto
+prev: ./grid.html
+next: false
 ---
 
 # Typography <Badge>Third party</Badge>
diff --git a/package-lock.json b/package-lock.json
index f42d713..4c7e9b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/tailwind-config",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index b49c764..ec6c616 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/tailwind-config",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "description": "A custom Tailwind CSS config",
   "main": "src/index.js",
   "scripts": {
diff --git a/src/index.js b/src/index.js
index e25b093..f90d8ab 100644
--- a/src/index.js
+++ b/src/index.js
@@ -16,6 +16,18 @@ module.exports = {
      */
     debugOutline: false,
 
+    /**
+     * Grid
+     */
+    gridPlugin: {
+      gutterWidth: {
+        default: 1,
+        s: 2,
+        l: 3,
+        xxl: 4,
+      },
+    },
+
     /**
      * Breakpoints
      */
@@ -167,17 +179,7 @@ module.exports = {
   },
   plugins: [
     require('./plugins/debug-outline')(),
-    require('./plugins/grid')({
-      gridGutters: {
-        default: '1',
-        xs: '1',
-        s: '2',
-        m: '2',
-        l: '3',
-        xl: '3',
-        xxl: '4',
-      },
-    }),
+    require('./plugins/grid')(),
     /**
      * Tailwind CSS typograpy plugin.
      * @see   https://github.com/benface/tailwindcss-typography
diff --git a/src/plugins/debug-outline.js b/src/plugins/debug-outline.js
index 0451348..3defcf1 100644
--- a/src/plugins/debug-outline.js
+++ b/src/plugins/debug-outline.js
@@ -3,9 +3,9 @@
  *
  * @package @studiometa/tailwind-config
  */
-module.exports = function debugOutline() {
-  return function addDebugOutlineBase({ addBase, theme }) {
-    if (theme('debugOutline')) {
+module.exports = function debugOutlinePluginFactory() {
+  return function debugOutlinePlugin({ addBase, theme }) {
+    if (theme('debugOutline', false)) {
       addBase([
         {
           '.debug': {
diff --git a/src/plugins/grid.js b/src/plugins/grid.js
index eb0ac5b..7230868 100644
--- a/src/plugins/grid.js
+++ b/src/plugins/grid.js
@@ -10,18 +10,21 @@ const max = require('lodash.max');
  * - How to create tailwind plugins
  * @see https://tailwindcss.com/docs/plugins/
  *
- * @param {array}  columnCount    Number of columns to have in the grid, default is 12
- * @param {object} gridGutters    Per breakpoint grid gutter size value
- * @param {string} gridGutterUnit Unit to use for the grid gutter size, default is rem
  * @param {array}  variants
  */
-module.exports = function gridPlugin({
-  columnCount = range(1, 12),
-  gridGutters,
-  gridGutterUnit = 'rem',
-}) {
-  return ({ addComponents, theme }) => {
+module.exports = function gridPluginFactory() {
+  return function gridPlugin({ addComponents, theme }) {
     const screens = theme('screens', {});
+    const columns = range(1, theme('gridPlugin.columns', 12));
+    const gutterUnit = theme('gridPlugin.gutterUnit', 'rem');
+    let gutterWidth = theme('gridPlugin.gutterWidth', 1);
+
+    // Transform `gutterWidth` into an object if define as a string or number
+    if (typeof gutterWidth === 'string' || typeof gutterWidth === 'number') {
+      gutterWidth = {
+        default: gutterWidth,
+      };
+    }
 
     addComponents([
       {
@@ -29,23 +32,23 @@ module.exports = function gridPlugin({
          * Add padding's to .grid
          */
         '.grid': {
-          paddingRight: gridGutters.default * 0.5 + gridGutterUnit,
-          paddingLeft: gridGutters.default * 0.5 + gridGutterUnit,
+          paddingRight: gutterWidth.default * 0.5 + gutterUnit,
+          paddingLeft: gutterWidth.default * 0.5 + gutterUnit,
         },
         /**
          * Add margin's to .grid-row
          */
         '.grid-row': {
-          marginRight: gridGutters.default * -0.5 + gridGutterUnit,
-          marginLeft: gridGutters.default * -0.5 + gridGutterUnit,
+          marginRight: gutterWidth.default * -0.5 + gutterUnit,
+          marginLeft: gutterWidth.default * -0.5 + gutterUnit,
         },
 
         /**
          * Add padding's to .grid-col-{number}
          */
         '[class*="grid-col-"]': {
-          paddingRight: gridGutters.default * 0.5 + gridGutterUnit,
-          paddingLeft: gridGutters.default * 0.5 + gridGutterUnit,
+          paddingRight: gutterWidth.default * 0.5 + gutterUnit,
+          paddingLeft: gutterWidth.default * 0.5 + gutterUnit,
         },
         /**
          * Responsive classes
@@ -179,9 +182,9 @@ module.exports = function gridPlugin({
            * Column pull
            * grid-pull-{number}
            */
-          ...range(1, max(columnCount) + 2).map(count => ({
+          ...range(1, max(columns) + 2).map(count => ({
             [`.grid-pull-${count}`]: {
-              marginLeft: `${(count * -100) / (max(columnCount) + 1)}%`,
+              marginLeft: `${(count * -100) / (max(columns) + 1)}%`,
             },
           })),
 
@@ -189,9 +192,9 @@ module.exports = function gridPlugin({
            * Column push
            * grid-push-{number}
            */
-          ...range(1, max(columnCount) + 2).map(count => ({
+          ...range(1, max(columns) + 2).map(count => ({
             [`.grid-push-${count}`]: {
-              marginLeft: `${(count * 100) / (max(columnCount) + 1)}%`,
+              marginLeft: `${(count * 100) / (max(columns) + 1)}%`,
             },
           })),
 
@@ -199,44 +202,46 @@ module.exports = function gridPlugin({
            * Column size
            * grid-col-{number}
            */
-          ...range(1, max(columnCount) + 2).map(count => ({
+          ...range(1, max(columns) + 2).map(count => ({
             [`.grid-col-${count}`]: {
               float: 'left',
               display: 'block',
-              width: `${(count * 100) / (max(columnCount) + 1)}%`,
+              width: `${(count * 100) / (max(columns) + 1)}%`,
             },
           })),
         ],
       },
-      ...Object.keys(screens).map(breakpoint => ({
-        /**
-         * Declare the @media query rule
-         */
-        [`@screen ${breakpoint}`]: {
-          /**
-           * Add padding's to .grid
-           */
-          '.grid': {
-            paddingRight: gridGutters[breakpoint] * 0.5 + gridGutterUnit,
-            paddingLeft: gridGutters[breakpoint] * 0.5 + gridGutterUnit,
-          },
+      ...Object.keys(screens)
+        .filter(breakpoint => breakpoint in gutterWidth)
+        .map(breakpoint => ({
           /**
-           * Add margin's to .grid-row
+           * Declare the @media query rule
            */
-          '.grid-row': {
-            marginRight: gridGutters[breakpoint] * -0.5 + gridGutterUnit,
-            marginLeft: gridGutters[breakpoint] * -0.5 + gridGutterUnit,
-          },
+          [`@screen ${breakpoint}`]: {
+            /**
+             * Add padding's to .grid
+             */
+            '.grid': {
+              paddingRight: gutterWidth[breakpoint] * 0.5 + gutterUnit,
+              paddingLeft: gutterWidth[breakpoint] * 0.5 + gutterUnit,
+            },
+            /**
+             * Add margin's to .grid-row
+             */
+            '.grid-row': {
+              marginRight: gutterWidth[breakpoint] * -0.5 + gutterUnit,
+              marginLeft: gutterWidth[breakpoint] * -0.5 + gutterUnit,
+            },
 
-          /**
-           * Add padding's to .grid-col-{number}
-           */
-          [`[class*="grid-col-"]`]: {
-            paddingRight: gridGutters[breakpoint] * 0.5 + gridGutterUnit,
-            paddingLeft: gridGutters[breakpoint] * 0.5 + gridGutterUnit,
+            /**
+             * Add padding's to .grid-col-{number}
+             */
+            [`[class*="grid-col-"]`]: {
+              paddingRight: gutterWidth[breakpoint] * 0.5 + gutterUnit,
+              paddingLeft: gutterWidth[breakpoint] * 0.5 + gutterUnit,
+            },
           },
-        },
-      })),
+        })),
     ]);
   };
 };