From 058a8756d4a95d3ba1268860263f2d20d0d84767 Mon Sep 17 00:00:00 2001
From: Jan Hassel <jan.hassel@ibm.com>
Date: Tue, 5 Oct 2021 17:09:06 +0200
Subject: [PATCH 1/2] fix(grid): make subgrid work with grid offset

---
 packages/grid/scss/modules/_css-grid.scss    | 12 ++----------
 packages/react/src/components/Grid/Column.js |  6 +-----
 2 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/packages/grid/scss/modules/_css-grid.scss b/packages/grid/scss/modules/_css-grid.scss
index f0f39373567f..0362b2a8876c 100644
--- a/packages/grid/scss/modules/_css-grid.scss
+++ b/packages/grid/scss/modules/_css-grid.scss
@@ -254,10 +254,6 @@
   .#{$prefix}--col-start-#{$i} {
     grid-column-start: $i;
   }
-
-  .#{$prefix}--col-end-#{$i} {
-    grid-column-end: $i;
-  }
 }
 
 .#{$prefix}--col-start-auto {
@@ -272,17 +268,13 @@
   $columns: map.get($value, columns);
 
   @include breakpoint($name) {
-    // The `grid-column-end` and `grid-column-start` properties are *not* inclusive.
-    // It starts/ends the column *at* the column, not *on* the column. We must
+    // The `grid-column-start` property is *not* inclusive.
+    // It starts the column *at* the column, not *on* the column. We must
     // ensure that there is one additional class available for each breakpoint.
     @for $i from 1 through $columns + 1 {
       .#{$prefix}--#{$name}\:col-start-#{$i} {
         grid-column-start: $i;
       }
-
-      .#{$prefix}--#{$name}\:col-end-#{$i} {
-        grid-column-end: $i;
-      }
     }
 
     .#{$prefix}--#{$name}\:col-start-auto {
diff --git a/packages/react/src/components/Grid/Column.js b/packages/react/src/components/Grid/Column.js
index 71dfb825bae3..bfba3b29dcb8 100644
--- a/packages/react/src/components/Grid/Column.js
+++ b/packages/react/src/components/Grid/Column.js
@@ -150,11 +150,7 @@ function getClassNameForBreakpoints(breakpoints, prefix) {
     }
 
     if (typeof span === 'number') {
-      if (typeof offset === 'number' && offset > 0) {
-        classNames.push(`${prefix}--${name}:col-end-${offset + span + 1}`);
-      } else {
-        classNames.push(`${prefix}--${name}:col-span-${span}`);
-      }
+      classNames.push(`${prefix}--${name}:col-span-${span}`);
     }
 
     if (span === true) {

From 58fb8a906c226489b6fee356a034826d24c09839 Mon Sep 17 00:00:00 2001
From: Taylor Jones <taylor.jones826@gmail.com>
Date: Fri, 8 Oct 2021 14:11:24 -0500
Subject: [PATCH 2/2] docs(grid): fix storybook styles prefix

---
 .../src/components/Grid/Grid.stories.scss     | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/carbon-react/src/components/Grid/Grid.stories.scss b/packages/carbon-react/src/components/Grid/Grid.stories.scss
index 734f3e73056e..6db1000777c2 100644
--- a/packages/carbon-react/src/components/Grid/Grid.stories.scss
+++ b/packages/carbon-react/src/components/Grid/Grid.stories.scss
@@ -2,54 +2,54 @@
 @use '@carbon/styles/scss/type' as *;
 
 // Grid modes
-.bx--css-grid {
+.cds--css-grid {
   background-color: $blue-20;
   outline: 1px dashed $blue-40;
 }
 
-.bx--css-grid p {
+.cds--css-grid p {
   @include type-style('code-02');
 }
 
-.bx--css-grid p:first-of-type {
+.cds--css-grid p:first-of-type {
   //messing up progress indicator stories
   margin-top: 0;
 }
 
-.bx--css-grid.bx--css-grid--narrow {
+.cds--css-grid.cds--css-grid--narrow {
   background-color: $teal-20;
   outline: 1px dashed $teal-40;
 }
 
-.bx--css-grid.bx--css-grid--condensed {
+.cds--css-grid.cds--css-grid--condensed {
   background-color: $purple-20;
   outline: 1px dashed $purple-40;
 }
 
 // Only use background for subgrid example, not other subgrids in "mixed modes" story or others
-.bx--subgrid.example {
+.cds--subgrid.example {
   background-color: $green-20;
 }
 
 // Columns
-.bx--css-grid > [class*='col'],
-.bx--subgrid > [class*='col'] {
+.cds--css-grid > [class*='col'],
+.cds--subgrid > [class*='col'] {
   min-height: 80px;
 }
 
-.bx--css-grid > [class*='col'] {
+.cds--css-grid > [class*='col'] {
   background: $blue-10;
 }
 
-.bx--subgrid > [class*='col'] {
+.cds--subgrid > [class*='col'] {
   background: $green-10;
   outline: 1px dashed $green-30;
 }
 
-.bx--css-grid.bx--css-grid--narrow > [class*='col'] {
+.cds--css-grid.cds--css-grid--narrow > [class*='col'] {
   background: $teal-10;
 }
 
-.bx--css-grid.bx--css-grid--condensed > [class*='col'] {
+.cds--css-grid.cds--css-grid--condensed > [class*='col'] {
   background: $purple-10;
 }