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; } 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) {