diff --git a/packages/grid/scss/_css-grid.scss b/packages/grid/scss/_css-grid.scss
index 6913cf61ffb5..3a0c50d2b464 100644
--- a/packages/grid/scss/_css-grid.scss
+++ b/packages/grid/scss/_css-grid.scss
@@ -138,7 +138,7 @@
// Narrow
.#{$prefix}--css-grid--narrow {
- --cds-grid-gutter-start: 0;
+ --cds-grid-gutter-start: 0rem; /* stylelint-disable-line length-zero-no-unit */
}
// Condensed
@@ -187,7 +187,7 @@
}
.#{$prefix}--subgrid--narrow {
- --cds-grid-gutter-start: 0;
+ --cds-grid-gutter-start: 0rem; /* stylelint-disable-line length-zero-no-unit */
--cds-grid-gutter-end: #{math.div($grid-gutter, 2)};
--cds-grid-column-hang: #{math.div($grid-gutter, 2)};
}
diff --git a/packages/react/src/components/Grid/Grid.stories.js b/packages/react/src/components/Grid/Grid.stories.js
index db6e7b489751..42e5913ec184 100644
--- a/packages/react/src/components/Grid/Grid.stories.js
+++ b/packages/react/src/components/Grid/Grid.stories.js
@@ -110,49 +110,97 @@ export const Responsive = () => (
export const Subgrid = () => {
return (
-
-
- Small: Span 2 of 4
- Medium: Span 4 of 8
- Large: Span 3 of 16
-
-
- Small: Span 2 of 4
- Medium: Span 4 of 8
- Large: Span 10 of 16
-
-
- sm={1}
md={1}
lg={2}
-
-
- sm={1}
md={1}
lg={2}
-
-
- sm={0}
md={1}
lg={1}
-
-
- sm={0}
md={1}
lg={1}
-
-
- sm={0}
md={0}
lg={1}
-
-
- sm={0}
md={0}
lg={1}
-
-
- sm={0}
md={0}
lg={1}
-
-
- sm={0}
md={0}
lg={1}
-
-
-
-
- Small: Span 0 of 4
- Medium: Span 0 of 8
- Large: Span 3 of 16
-
-
+ <>
+
+
+ Small: Span 2 of 4
+ Medium: Span 4 of 8
+ Large: Span 3 of 16
+
+
+ Small: Span 2 of 4
+ Medium: Span 4 of 8
+ Large: Span 10 of 16
+
+
+ sm={1}
md={1}
lg={2}
+
+
+ sm={1}
md={1}
lg={2}
+
+
+ sm={0}
md={1}
lg={1}
+
+
+ sm={0}
md={1}
lg={1}
+
+
+ sm={0}
md={0}
lg={1}
+
+
+ sm={0}
md={0}
lg={1}
+
+
+ sm={0}
md={0}
lg={1}
+
+
+ sm={0}
md={0}
lg={1}
+
+
+
+
+ Small: Span 0 of 4
+ Medium: Span 0 of 8
+ Large: Span 3 of 16
+
+
+
+ Wide
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Narrow
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Condensed
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
};