diff --git a/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap b/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap
index d252e81281dc..f11db441969a 100644
--- a/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap
+++ b/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap
@@ -128,6 +128,15 @@ em {
     padding-right: 0.0625rem;
     padding-left: 0.0625rem; }
 
+.bx--col-sm-0 {
+  width: 100%;
+  padding-right: 1rem;
+  padding-left: 1rem; }
+  .bx--row--condensed .bx--col-sm-0,
+  .bx--grid--condensed .bx--col-sm-0 {
+    padding-right: 0.0625rem;
+    padding-left: 0.0625rem; }
+
 .bx--col-sm-1 {
   width: 100%;
   padding-right: 1rem;
@@ -189,19 +198,26 @@ em {
   width: auto;
   max-width: 100%; }
 
+.bx--col-sm-0 {
+  display: none; }
+
 .bx--col-sm-1 {
+  display: block;
   flex: 0 0 25%;
   max-width: 25%; }
 
 .bx--col-sm-2 {
+  display: block;
   flex: 0 0 50%;
   max-width: 50%; }
 
 .bx--col-sm-3 {
+  display: block;
   flex: 0 0 75%;
   max-width: 75%; }
 
 .bx--col-sm-4 {
+  display: block;
   flex: 0 0 100%;
   max-width: 100%; }
 
@@ -217,6 +233,15 @@ em {
 .bx--offset-sm-3 {
   margin-left: 75%; }
 
+.bx--col-md-0 {
+  width: 100%;
+  padding-right: 1rem;
+  padding-left: 1rem; }
+  .bx--row--condensed .bx--col-md-0,
+  .bx--grid--condensed .bx--col-md-0 {
+    padding-right: 0.0625rem;
+    padding-left: 0.0625rem; }
+
 .bx--col-md-1 {
   width: 100%;
   padding-right: 1rem;
@@ -313,28 +338,38 @@ em {
     flex: 1 0 0%;
     width: auto;
     max-width: 100%; }
+  .bx--col-md-0 {
+    display: none; }
   .bx--col-md-1 {
+    display: block;
     flex: 0 0 12.5%;
     max-width: 12.5%; }
   .bx--col-md-2 {
+    display: block;
     flex: 0 0 25%;
     max-width: 25%; }
   .bx--col-md-3 {
+    display: block;
     flex: 0 0 37.5%;
     max-width: 37.5%; }
   .bx--col-md-4 {
+    display: block;
     flex: 0 0 50%;
     max-width: 50%; }
   .bx--col-md-5 {
+    display: block;
     flex: 0 0 62.5%;
     max-width: 62.5%; }
   .bx--col-md-6 {
+    display: block;
     flex: 0 0 75%;
     max-width: 75%; }
   .bx--col-md-7 {
+    display: block;
     flex: 0 0 87.5%;
     max-width: 87.5%; }
   .bx--col-md-8 {
+    display: block;
     flex: 0 0 100%;
     max-width: 100%; }
   .bx--offset-md-0 {
@@ -354,6 +389,15 @@ em {
   .bx--offset-md-7 {
     margin-left: 87.5%; } }
 
+.bx--col-lg-0 {
+  width: 100%;
+  padding-right: 1rem;
+  padding-left: 1rem; }
+  .bx--row--condensed .bx--col-lg-0,
+  .bx--grid--condensed .bx--col-lg-0 {
+    padding-right: 0.0625rem;
+    padding-left: 0.0625rem; }
+
 .bx--col-lg-1 {
   width: 100%;
   padding-right: 1rem;
@@ -486,40 +530,54 @@ em {
     flex: 1 0 0%;
     width: auto;
     max-width: 100%; }
+  .bx--col-lg-0 {
+    display: none; }
   .bx--col-lg-1 {
+    display: block;
     flex: 0 0 8.33333%;
     max-width: 8.33333%; }
   .bx--col-lg-2 {
+    display: block;
     flex: 0 0 16.66667%;
     max-width: 16.66667%; }
   .bx--col-lg-3 {
+    display: block;
     flex: 0 0 25%;
     max-width: 25%; }
   .bx--col-lg-4 {
+    display: block;
     flex: 0 0 33.33333%;
     max-width: 33.33333%; }
   .bx--col-lg-5 {
+    display: block;
     flex: 0 0 41.66667%;
     max-width: 41.66667%; }
   .bx--col-lg-6 {
+    display: block;
     flex: 0 0 50%;
     max-width: 50%; }
   .bx--col-lg-7 {
+    display: block;
     flex: 0 0 58.33333%;
     max-width: 58.33333%; }
   .bx--col-lg-8 {
+    display: block;
     flex: 0 0 66.66667%;
     max-width: 66.66667%; }
   .bx--col-lg-9 {
+    display: block;
     flex: 0 0 75%;
     max-width: 75%; }
   .bx--col-lg-10 {
+    display: block;
     flex: 0 0 83.33333%;
     max-width: 83.33333%; }
   .bx--col-lg-11 {
+    display: block;
     flex: 0 0 91.66667%;
     max-width: 91.66667%; }
   .bx--col-lg-12 {
+    display: block;
     flex: 0 0 100%;
     max-width: 100%; }
   .bx--offset-lg-0 {
@@ -547,6 +605,15 @@ em {
   .bx--offset-lg-11 {
     margin-left: 91.66667%; } }
 
+.bx--col-xlg-0 {
+  width: 100%;
+  padding-right: 1rem;
+  padding-left: 1rem; }
+  .bx--row--condensed .bx--col-xlg-0,
+  .bx--grid--condensed .bx--col-xlg-0 {
+    padding-right: 0.0625rem;
+    padding-left: 0.0625rem; }
+
 .bx--col-xlg-1 {
   width: 100%;
   padding-right: 1rem;
@@ -679,40 +746,54 @@ em {
     flex: 1 0 0%;
     width: auto;
     max-width: 100%; }
+  .bx--col-xlg-0 {
+    display: none; }
   .bx--col-xlg-1 {
+    display: block;
     flex: 0 0 8.33333%;
     max-width: 8.33333%; }
   .bx--col-xlg-2 {
+    display: block;
     flex: 0 0 16.66667%;
     max-width: 16.66667%; }
   .bx--col-xlg-3 {
+    display: block;
     flex: 0 0 25%;
     max-width: 25%; }
   .bx--col-xlg-4 {
+    display: block;
     flex: 0 0 33.33333%;
     max-width: 33.33333%; }
   .bx--col-xlg-5 {
+    display: block;
     flex: 0 0 41.66667%;
     max-width: 41.66667%; }
   .bx--col-xlg-6 {
+    display: block;
     flex: 0 0 50%;
     max-width: 50%; }
   .bx--col-xlg-7 {
+    display: block;
     flex: 0 0 58.33333%;
     max-width: 58.33333%; }
   .bx--col-xlg-8 {
+    display: block;
     flex: 0 0 66.66667%;
     max-width: 66.66667%; }
   .bx--col-xlg-9 {
+    display: block;
     flex: 0 0 75%;
     max-width: 75%; }
   .bx--col-xlg-10 {
+    display: block;
     flex: 0 0 83.33333%;
     max-width: 83.33333%; }
   .bx--col-xlg-11 {
+    display: block;
     flex: 0 0 91.66667%;
     max-width: 91.66667%; }
   .bx--col-xlg-12 {
+    display: block;
     flex: 0 0 100%;
     max-width: 100%; }
   .bx--offset-xlg-0 {
@@ -740,6 +821,15 @@ em {
   .bx--offset-xlg-11 {
     margin-left: 91.66667%; } }
 
+.bx--col-max-0 {
+  width: 100%;
+  padding-right: 1rem;
+  padding-left: 1rem; }
+  .bx--row--condensed .bx--col-max-0,
+  .bx--grid--condensed .bx--col-max-0 {
+    padding-right: 0.0625rem;
+    padding-left: 0.0625rem; }
+
 .bx--col-max-1 {
   width: 100%;
   padding-right: 1rem;
@@ -872,40 +962,54 @@ em {
     flex: 1 0 0%;
     width: auto;
     max-width: 100%; }
+  .bx--col-max-0 {
+    display: none; }
   .bx--col-max-1 {
+    display: block;
     flex: 0 0 8.33333%;
     max-width: 8.33333%; }
   .bx--col-max-2 {
+    display: block;
     flex: 0 0 16.66667%;
     max-width: 16.66667%; }
   .bx--col-max-3 {
+    display: block;
     flex: 0 0 25%;
     max-width: 25%; }
   .bx--col-max-4 {
+    display: block;
     flex: 0 0 33.33333%;
     max-width: 33.33333%; }
   .bx--col-max-5 {
+    display: block;
     flex: 0 0 41.66667%;
     max-width: 41.66667%; }
   .bx--col-max-6 {
+    display: block;
     flex: 0 0 50%;
     max-width: 50%; }
   .bx--col-max-7 {
+    display: block;
     flex: 0 0 58.33333%;
     max-width: 58.33333%; }
   .bx--col-max-8 {
+    display: block;
     flex: 0 0 66.66667%;
     max-width: 66.66667%; }
   .bx--col-max-9 {
+    display: block;
     flex: 0 0 75%;
     max-width: 75%; }
   .bx--col-max-10 {
+    display: block;
     flex: 0 0 83.33333%;
     max-width: 83.33333%; }
   .bx--col-max-11 {
+    display: block;
     flex: 0 0 91.66667%;
     max-width: 91.66667%; }
   .bx--col-max-12 {
+    display: block;
     flex: 0 0 100%;
     max-width: 100%; }
   .bx--offset-max-0 {
diff --git a/packages/grid/docs/sass.md b/packages/grid/docs/sass.md
index 2f22d299ab89..ca597d586a79 100644
--- a/packages/grid/docs/sass.md
+++ b/packages/grid/docs/sass.md
@@ -116,18 +116,25 @@ yet.
 
 ### ❌carbon--make-col [mixin]
 
-Define the width of the column for a given span and column count.
+Define the width of the column for a given span and column count. A width of 0
+will hide the column entirely.
 
 <details>
 <summary>Source code</summary>
 
 ```scss
 @mixin carbon--make-col($span, $columns) {
-  flex: 0 0 percentage($span / $columns);
-  // Add a `max-width` to ensure content within each column does not blow out
-  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
-  // do not appear to require this.
-  max-width: percentage($span / $columns);
+  @if $span == 0 {
+    display: none;
+  } @else {
+    // Explicitly write `display: block` to override
+    display: block;
+    flex: 0 0 percentage($span / $columns);
+    // Add a `max-width` to ensure content within each column does not blow out
+    // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+    // do not appear to require this.
+    max-width: percentage($span / $columns);
+  }
 }
 ```
 
@@ -196,7 +203,7 @@ Output the CSS required for all the columns in a given grid system.
     $columns: map-get(map-get($breakpoints, $breakpoint), columns);
 
     // Allow columns to stretch full width below their breakpoints
-    @for $i from 1 through $columns {
+    @for $i from 0 through $columns {
       .#{$prefix}--col#{$infix}-#{$i} {
         @include carbon--make-col-ready();
       }
@@ -224,7 +231,7 @@ Output the CSS required for all the columns in a given grid system.
         max-width: 100%;
       }
 
-      @for $i from 1 through $columns {
+      @for $i from 0 through $columns {
         .#{$prefix}--col#{$infix}-#{$i} {
           @include carbon--make-col($i, $columns);
         }
@@ -559,9 +566,12 @@ Generate the CSS for a grid for the given breakpoints and gutters
     @include carbon--make-row();
   }
 
-  .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] {
-    padding-top: $condensed-gutter / 2;
-    padding-bottom: $condensed-gutter / 2;
+  .#{$prefix}--grid--condensed .#{$prefix}--row:not(:last-of-type) {
+    margin-bottom: $condensed-gutter;
+  }
+
+  .#{$prefix}--row--condensed + .#{$prefix}--row--condensed {
+    margin-top: $condensed-gutter;
   }
 
   @include carbon--make-grid-columns($breakpoints, $grid-gutter);
diff --git a/packages/grid/examples/preview/src/components/App.js b/packages/grid/examples/preview/src/components/App.js
index 8ac618f56948..c20c2fcdbeec 100644
--- a/packages/grid/examples/preview/src/components/App.js
+++ b/packages/grid/examples/preview/src/components/App.js
@@ -63,7 +63,7 @@ export default function App() {
                                 )
                               ),
                               Prism.languages.javascript,
-                              'javscript'
+                              'javascript'
                             ),
                           }}
                         />
@@ -156,6 +156,37 @@ const sections = [
           </div>
         ),
       },
+      {
+        name: 'Hide column per breakpoint',
+        description:
+          'Use the column helpers to specify a column span of 0 at different widths',
+        content: () => (
+          <div className="bx--grid">
+            <div className="bx--row">
+              <div className="bx--col-sm-1 bx--col-md-2 bx--col-lg-6">
+                <div className="outside">
+                  <div className="inside">Never Hidden</div>
+                </div>
+              </div>
+              <div className="bx--col-sm-2 bx--col-md-0 bx--col-lg-6">
+                <div className="outside">
+                  <div className="inside">Hidden on Medium Screens</div>
+                </div>
+              </div>
+              <div className="bx--col-sm-0 bx--col-md-3 bx--col-lg-4">
+                <div className="outside">
+                  <div className="inside">Hidden on Small Screens</div>
+                </div>
+              </div>
+              <div className="bx--col-sm-1 bx--col-md-3 bx--col-lg-0">
+                <div className="outside">
+                  <div className="inside">Hidden on Large Screens</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        ),
+      },
     ],
   },
   {
@@ -322,7 +353,7 @@ const sections = [
   {
     id: 'no-gutters',
     name: 'No gutters',
-    desription:
+    description:
       'Sometimes it is useful to have no gutters in a layout, particularly for fluid layouts. You can specify no gutters on a column-by-column basis or for all columns in a row.',
     examples: [
       {
@@ -488,7 +519,7 @@ const sections = [
     id: 'hang',
     name: 'Hanging content',
     description:
-      'When working with no gutters, it is helpful to keep content inside of the columns aligned with other rows in the same grid. In order to do this, we use a combinated of no-gutter and hang classes.',
+      'When working with no gutters, it is helpful to keep content inside of the columns aligned with other rows in the same grid. In order to do this, we use a combination of no-gutter and hang classes.',
     examples: [
       {
         name: 'Hanging text',
@@ -757,35 +788,33 @@ const sections = [
     id: 'full-bleed',
     name: 'Full bleed',
     description:
-      'When wanting background colors to go edge-to-edge, you will need to create a wrapping node around your grid with the color that you are looking to apply.',
+      'When wanting background colors to go edge-to-edge, you can apply your desired color directly to the grid',
     examples: [
       {
         name: 'Usage',
         description:
-          'In this example, we create an outer div and give it the class name bleed which we then style with a background color.',
+          'In this example, we give the grid element the class name "bleed" which we then style with a background color.',
         content: () => (
-          <div className="bleed">
-            <div className="bx--grid">
-              <div className="bx--row">
-                <div className="bx--col">
-                  <div className="outside">
-                    <div className="inside">1</div>
-                  </div>
+          <div className="bx--grid bleed">
+            <div className="bx--row">
+              <div className="bx--col">
+                <div className="outside">
+                  <div className="inside">1</div>
                 </div>
-                <div className="bx--col">
-                  <div className="outside">
-                    <div className="inside">1</div>
-                  </div>
+              </div>
+              <div className="bx--col">
+                <div className="outside">
+                  <div className="inside">1</div>
                 </div>
-                <div className="bx--col">
-                  <div className="outside">
-                    <div className="inside">1</div>
-                  </div>
+              </div>
+              <div className="bx--col">
+                <div className="outside">
+                  <div className="inside">1</div>
                 </div>
-                <div className="bx--col">
-                  <div className="outside">
-                    <div className="inside">1</div>
-                  </div>
+              </div>
+              <div className="bx--col">
+                <div className="outside">
+                  <div className="inside">1</div>
                 </div>
               </div>
             </div>
diff --git a/packages/grid/scss/_mixins.scss b/packages/grid/scss/_mixins.scss
index c3e413f7f1df..452a1c8da147 100644
--- a/packages/grid/scss/_mixins.scss
+++ b/packages/grid/scss/_mixins.scss
@@ -44,16 +44,23 @@
 }
 
 /// Define the width of the column for a given span and column count.
+/// A width of 0 will hide the column entirely.
 /// @param {Number} $span - The number of columns covered
 /// @param {Number} $columns - The total number of columns available
 /// @access private
 /// @group @carbon/grid
 @mixin carbon--make-col($span, $columns) {
-  flex: 0 0 percentage($span / $columns);
-  // Add a `max-width` to ensure content within each column does not blow out
-  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
-  // do not appear to require this.
-  max-width: percentage($span / $columns);
+  @if $span == 0 {
+    display: none;
+  } @else {
+    // Explicitly include `display: block` to override
+    display: block;
+    flex: 0 0 percentage($span / $columns);
+    // Add a `max-width` to ensure content within each column does not blow out
+    // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+    // do not appear to require this.
+    max-width: percentage($span / $columns);
+  }
 }
 
 /// Create a column offset for a given span and column count.
@@ -88,7 +95,7 @@
     $columns: map-get(map-get($breakpoints, $breakpoint), columns);
 
     // Allow columns to stretch full width below their breakpoints
-    @for $i from 1 through $columns {
+    @for $i from 0 through $columns {
       .#{$prefix}--col#{$infix}-#{$i} {
         @include carbon--make-col-ready();
       }
@@ -116,7 +123,7 @@
         max-width: 100%;
       }
 
-      @for $i from 1 through $columns {
+      @for $i from 0 through $columns {
         .#{$prefix}--col#{$infix}-#{$i} {
           @include carbon--make-col($i, $columns);
         }