diff --git a/demo/scss/demo.scss b/demo/scss/demo.scss
index e1fb147a1c27..96e3bfc90a30 100644
--- a/demo/scss/demo.scss
+++ b/demo/scss/demo.scss
@@ -133,7 +133,27 @@
 }
 
 [class*="bx--col"] {
-  padding: 1rem;
   background-color: $color__gray-1;
-  border: 10px solid $ui-02;
+
+  p {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+}
+
+.col-example {
+  background-color: rgba(blue, 0.2);
+  height: 100%;
+}
+
+.red {
+  background-color: rgba(red, 0.2);
+}
+
+.green {
+  background-color: rgba(green, 0.2);
+}
+
+.indigo {
+  background-color: rgba(indigo, 0.2);
 }
diff --git a/server.js b/server.js
index 963d931ffc5d..614b23fc58b3 100644
--- a/server.js
+++ b/server.js
@@ -24,62 +24,100 @@ app.use(express.static('scripts'));
 app.use('/docs/js', express.static('docs/js'));
 
 const getContent = glob =>
-   globby(glob)
-    .then((filePaths) => {
-      if (filePaths.length === 0) {
-        return undefined;
-      }
-      return Promise.all(filePaths.map(filePath => readFile(filePath, { encoding: 'utf8' })))
-        .then(contents => contents.reduce((a, b) => a.concat(b)));
-    });
+  globby(glob).then(filePaths => {
+    if (filePaths.length === 0) {
+      return undefined;
+    }
+    return Promise.all(
+      filePaths.map(filePath => readFile(filePath, { encoding: 'utf8' }))
+    ).then(contents => contents.reduce((a, b) => a.concat(b)));
+  });
 
 const getEachContent = glob =>
-  globby(glob)
-    .then((filePaths) => { // eslint-disable-line arrow-body-style
-      return Promise.all(filePaths.map(filePath => readFile(filePath, { encoding: 'utf8' })))
-        .then(contents => contents.map((content, i) => ({ name: path.basename(filePaths[i], '.html'), content })));
-    });
-
-const componentDirs = readdir('src/components')
-  .then((items) => { // eslint-disable-line arrow-body-style
-    return Promise.all(items.map(item => stat(path.resolve('src/components', item))))
-      .then(stats => items.filter((item, i) => stats[i].isDirectory()));
+  globby(glob).then(filePaths => {
+    // eslint-disable-line arrow-body-style
+    return Promise.all(
+      filePaths.map(filePath => readFile(filePath, { encoding: 'utf8' }))
+    ).then(contents =>
+      contents.map((content, i) => ({
+        name: path.basename(filePaths[i], '.html'),
+        content,
+      }))
+    );
   });
 
+const componentDirs = readdir('src/components').then(items => {
+  // eslint-disable-line arrow-body-style
+  return Promise.all(
+    items.map(item => stat(path.resolve('src/components', item)))
+  ).then(stats => items.filter((item, i) => stats[i].isDirectory()));
+});
+
 const topRouteHandler = (req, res) => {
   const name = req.params.component;
 
-  if (name && path.relative('src/components', `src/components/${name}`).substr(0, 2) === '..') {
+  if (
+    name &&
+    path.relative('src/components', `src/components/${name}`).substr(0, 2) ===
+      '..'
+  ) {
     res.status(404).end();
   } else {
     componentDirs
-      .then((dirs) => { // eslint-disable-line arrow-body-style
-        return Promise.all(dirs.map(dir => getEachContent(path.resolve('src/components', dir, '**/*.html'))))
-          .then(subItemsList => subItemsList.map((subItems, i) => { // eslint-disable-line arrow-body-style
-            return subItems.length > 0 && Object.assign({
-              name: dirs[i],
-              selected: name === dirs[i] || subItems.find(subItem => name === subItem.name),
-            }, subItems.length <= 1 ? {
-              content: subItems[0].content,
-            } : {}, subItems.length <= 1 ? {} : {
-              items: subItems.map(subItem => Object.assign(subItem, { selected: name === subItem.name })),
-            });
-          }))
+      .then(dirs => {
+        // eslint-disable-line arrow-body-style
+        return Promise.all(
+          dirs.map(dir =>
+            getEachContent(path.resolve('src/components', dir, '**/*.html'))
+          )
+        )
+          .then(subItemsList =>
+            subItemsList.map((subItems, i) => {
+              // eslint-disable-line arrow-body-style
+              return (
+                subItems.length > 0 &&
+                Object.assign(
+                  {
+                    name: dirs[i],
+                    selected:
+                      name === dirs[i] ||
+                      subItems.find(subItem => name === subItem.name),
+                  },
+                  subItems.length <= 1
+                    ? {
+                        content: subItems[0].content,
+                      }
+                    : {},
+                  subItems.length <= 1
+                    ? {}
+                    : {
+                        items: subItems.map(subItem =>
+                          Object.assign(subItem, {
+                            selected: name === subItem.name,
+                          })
+                        ),
+                      }
+                )
+              );
+            })
+          )
           .then(links => links.filter(Boolean))
-          .then((links) => {
+          .then(links => {
             if (!name) {
               const firstLink = links[0];
-              (firstLink.items ? firstLink.items[0] : firstLink).selected = true;
+              (firstLink.items
+                ? firstLink.items[0]
+                : firstLink).selected = true;
             }
             return links;
           });
       })
-      .then((links) => {
+      .then(links => {
         res.render('demo-all', {
           links,
         });
       })
-      .catch((error) => {
+      .catch(error => {
         console.error(error.stack); // eslint-disable-line no-console
         res.status(500).end();
       });
@@ -96,7 +134,7 @@ app.get('/components/:component', (req, res) => {
     res.status(404).end();
   } else {
     getContent(glob)
-      .then((html) => {
+      .then(html => {
         if (typeof html === 'undefined') {
           res.status(404).end();
         } else {
@@ -105,7 +143,7 @@ app.get('/components/:component', (req, res) => {
           });
         }
       })
-      .catch((error) => {
+      .catch(error => {
         console.error(error.stack); // eslint-disable-line no-console
         res.status(500).end();
       });
@@ -118,7 +156,7 @@ app.get('/grid', (req, res) => {
   if (path.relative('src/globals', glob).substr(0, 2) === '..') {
     res.status(404).end();
   } else {
-    Promise.all([getContent(glob), allLinks])
+    Promise.all([getContent(glob)])
       .then(results => {
         if (typeof results[0] === 'undefined') {
           res.status(404).end();
diff --git a/src/globals/grid/_grid.scss b/src/globals/grid/_grid.scss
index 70f305eb9c76..060e8510f235 100644
--- a/src/globals/grid/_grid.scss
+++ b/src/globals/grid/_grid.scss
@@ -1,66 +1,109 @@
-$gutter-size: 10px;
-$i: 0;
+// map functions
+@function breakpoint($breakpoint) {
+  @if map-has-key($grid-breakpoints, $breakpoint) {
+    @return map-get($grid-breakpoints, $breakpoint);
+  } @else {
+    @warn 'breakpoint: could not find #{$breakpoint} in $grid-breakpoints map. Please make sure it is defined';
+  }
+}
 
-@mixin column-size($col-num) {
-  flex-basis: (100% * $col-num / 12);
-  max-width: (100% * $col-num / 12);
+@function gutter($breakpoint) {
+  @if map-has-key($gutter-breakpoints, $breakpoint) {
+    @return map-get($gutter-breakpoints, $breakpoint);
+  } @else {
+    @warn 'gutter: could not find #{$breakpoint} in $gutter-breakpoints map. Please make sure it is defined';
+  }
 }
 
+@function grid-gutter($breakpoint) {
+  @if map-has-key($grid-gutter-breakpoints, $breakpoint) {
+    @return map-get($grid-gutter-breakpoints, $breakpoint);
+  } @else {
+    @warn 'grid-gutter: could not find #{$breakpoint} in $grid-breakpoints map. Please make sure it is defined';
+  }
+}
+
+$max-width: 1600px;
+$columns: 12;
+
+$grid-breakpoints: (sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1600px);
+$gutter-breakpoints: (xs: 5px, sm: 10px);
+$grid-gutter-breakpoints: (xs: 3%, sm: 5%);
+
 .bx--grid {
-  margin: 0 3%;
+  margin-left: grid-gutter('xs');
+  margin-right: grid-gutter('xs');
+  padding-left: gutter('xs');
+  padding-right: gutter('xs');
 
-  @include breakpoint('bp--xs--major') {
-    margin: 0 5%;
+  @media (min-width: breakpoint('sm')) {
+    margin-left: grid-gutter('sm');
+    margin-right: grid-gutter('sm');
+    padding-left: gutter('sm');
+    padding-right: gutter('sm');
+  }
+
+  &.max {
+    max-width: $max-width;
   }
 }
 
 .bx--row {
   display: flex;
   flex-wrap: wrap;
-  margin: 0 $gutter-size * -1;
+  margin: 0 gutter('xs') * -1;
+
+  @media (min-width: breakpoint('sm')) {
+    margin: 0 gutter('sm') * -1;
+  }
 }
 
 [class*="bx--col"] {
   position: relative;
   width: 100%;
   min-height: 1px;
-  padding: 0 $gutter-size;
-}
+  padding: 0 gutter('xs');
 
-.bx--col-xs,
-.bx--col-sm,
-.bx--col-md,
-.bx--col-lg {
-  flex-basis: 0;
-  flex: 1;
-  flex-grow: 1;
-  max-width: 100%;
+  @media (min-width: breakpoint('sm')) {
+    padding: 0 gutter('sm');
+  }
 }
 
-@while $i <= 12 {
-
+@for $i from 1 through $columns {
   .bx--col-xs-#{$i} {
-    @include column-size($i);
+    flex-basis: (100% * $i / $columns);
   }
+}
 
-  @media (min-width: 720px) {
-    .bx--col-sm-#{$i} {
-      @include column-size($i);
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @media (min-width: breakpoint($breakpoint)) {
+    .bx--col-#{$breakpoint}-auto {
+      flex: 0 0 auto;
+      width: auto;
     }
-  }
 
-  @media (min-width: 970px) {
-    .bx--col-md-#{$i} {
-      @include column-size($i);
+    @for $i from 1 through $columns {
+      .bx--col-#{$breakpoint}-#{$i} {
+        flex-basis: (100% * $i / $columns);
+      }
     }
   }
+}
 
-  @media (min-width: 1170px) {
-    .bx--col-lg-#{$i} {
-      @include column-size($i);
-    }
-  }
+// deprecated
+$gutter-size: 10px;
 
-  $i: $i + 1;
+@mixin column-size($col-num) {
+  flex-basis: (100% * $col-num / $columns);
+  max-width: (100% * $col-num / $columns);
 }
 
+.bx--col-xs,
+.bx--col-sm,
+.bx--col-md,
+.bx--col-lg {
+  flex-basis: 0;
+  flex: 1;
+  flex-grow: 1;
+  max-width: 100%;
+}
diff --git a/src/globals/grid/grid.html b/src/globals/grid/grid.html
index 3ec5a33e5709..40d0b2a5b570 100644
--- a/src/globals/grid/grid.html
+++ b/src/globals/grid/grid.html
@@ -1,30 +1,24 @@
 <div class="bx--grid">
   <div class="bx--row">
-    <div class="bx--col-md-8">.bx--col-md-8</div>
-    <div class="bx--col-md-4">.bx--col-md-4</div>
+    <div class="bx--col-xs-12 bx--col-sm-6 indigo">
+      <div class="bx--row">
+        <div class="bx--col-xs-12 bx--col-sm-6">
+          <div class="col-example">
+            <p>Content space for bx--col-xs-12 bx--col-sm-6</p>
+          </div>
+        </div>
+        <div class="bx--col-xs-12 bx--col-sm-6 green">
+          <p>Full space for bx--col-xs-12 bx--col-sm-6 (columns naturally have padding on them, adding a background color to
+            the column directly will effect the entire column, as opposed to using a child element in the example to the
+            left). </p>
+        </div>
+      </div>
+
+      <p>Columns also expand to match the vertical size of the rest of the row (see red column)</p>
+    </div>
+    <div class="bx--col-xs-12 bx--col-sm-6 red">
+      <p>Background color over entire column, not just content space</p>
+
+    </div>
   </div>
-  <div class="bx--row">
-    <div class="bx--col-md-4">.bx--col-md-4</div>
-    <div class="bx--col-md-4">.bx--col-md-4</div>
-    <div class="bx--col-md-4">.bx--col-md-4</div>
-  </div>
-  <div class="bx--row">
-    <div class="bx--col-md-3">.bx--col-md-3</div>
-    <div class="bx--col-md-6">.bx--col-md-6</div>
-    <div class="bx--col-md-3">.bx--col-md-3</div>
-  </div>
-  <div class="bx--row">
-    <div class="bx--col-xs-1">.bx--col-xs-1</div>
-    <div class="bx--col-xs-1">.bx--col-xs-1</div>
-    <div class="bx--col-xs-1">.bx--col-xs-1</div>
-    <div class="bx--col-xs-1">.bx--col-xs-1</div>
-    <div class="bx--col-xs-1">.bx--col-xs-1</div>
-    <div class="bx--col-xs-1">.bx--col-xs-1</div>
-    <div class="bx--col-xs-1">.bx--col-xs-1</div>
-    <div class="bx--col-xs-1">.bx--col-xs-1</div>
-    <div class="bx--col-xs-1">.bx--col-xs-1</div>
-    <div class="bx--col-xs-1">.bx--col-xs-1</div>
-    <div class="bx--col-xs-1">.bx--col-xs-1</div>
-    <div class="bx--col-xs-1">.bx--col-xs-1</div>
-  </div>
-</div>
+</div>
\ No newline at end of file