From d56c8856d5304f2311826a0fe85ad366c789a74b Mon Sep 17 00:00:00 2001
From: Alison Joseph <alison.joseph@us.ibm.com>
Date: Tue, 17 Dec 2024 15:09:14 -0600
Subject: [PATCH] fix(subgrid): narrow mode margin (#18255)

* fix(subgrid): narrow mode margin value

* chore: revert extra change

* chore: remove duplicate style

* chore: oops

* chore: update stoybook
---
 packages/grid/scss/_css-grid.scss             |   4 +-
 .../react/src/components/Grid/Grid.stories.js | 134 ++++++++++++------
 2 files changed, 93 insertions(+), 45 deletions(-)

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 (
-    <Grid>
-      <Column sm={2} md={4} lg={3}>
-        <p>Small: Span 2 of 4</p>
-        <p>Medium: Span 4 of 8</p>
-        <p>Large: Span 3 of 16</p>
-      </Column>
-      <Column sm={2} md={4} lg={10}>
-        <p>Small: Span 2 of 4</p>
-        <p>Medium: Span 4 of 8</p>
-        <p>Large: Span 10 of 16</p>
-        <Grid className="example">
-          <Column sm={1} md={1} lg={2}>
-            <p>sm={1}</p> <p>md={1}</p> <p>lg={2}</p>
-          </Column>
-          <Column sm={1} md={1} lg={2}>
-            <p>sm={1}</p> <p>md={1}</p> <p>lg={2}</p>
-          </Column>
-          <Column sm={0} md={1} lg={1}>
-            <p>sm={0}</p> <p>md={1}</p> <p>lg={1}</p>
-          </Column>
-          <Column sm={0} md={1} lg={1}>
-            <p>sm={0}</p> <p>md={1}</p> <p>lg={1}</p>
-          </Column>
-          <Column sm={0} md={0} lg={1}>
-            <p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
-          </Column>
-          <Column sm={0} md={0} lg={1}>
-            <p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
-          </Column>
-          <Column sm={0} md={0} lg={1}>
-            <p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
-          </Column>
-          <Column sm={0} md={0} lg={1}>
-            <p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
-          </Column>
-        </Grid>
-      </Column>
-      <Column sm={0} md={0} lg={3}>
-        <p>Small: Span 0 of 4</p>
-        <p>Medium: Span 0 of 8</p>
-        <p>Large: Span 3 of 16</p>
-      </Column>
-    </Grid>
+    <>
+      <Grid>
+        <Column sm={2} md={4} lg={3}>
+          <p>Small: Span 2 of 4</p>
+          <p>Medium: Span 4 of 8</p>
+          <p>Large: Span 3 of 16</p>
+        </Column>
+        <Column sm={2} md={4} lg={10}>
+          <p>Small: Span 2 of 4</p>
+          <p>Medium: Span 4 of 8</p>
+          <p>Large: Span 10 of 16</p>
+          <Grid className="example">
+            <Column sm={1} md={1} lg={2}>
+              <p>sm={1}</p> <p>md={1}</p> <p>lg={2}</p>
+            </Column>
+            <Column sm={1} md={1} lg={2}>
+              <p>sm={1}</p> <p>md={1}</p> <p>lg={2}</p>
+            </Column>
+            <Column sm={0} md={1} lg={1}>
+              <p>sm={0}</p> <p>md={1}</p> <p>lg={1}</p>
+            </Column>
+            <Column sm={0} md={1} lg={1}>
+              <p>sm={0}</p> <p>md={1}</p> <p>lg={1}</p>
+            </Column>
+            <Column sm={0} md={0} lg={1}>
+              <p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
+            </Column>
+            <Column sm={0} md={0} lg={1}>
+              <p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
+            </Column>
+            <Column sm={0} md={0} lg={1}>
+              <p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
+            </Column>
+            <Column sm={0} md={0} lg={1}>
+              <p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
+            </Column>
+          </Grid>
+        </Column>
+        <Column sm={0} md={0} lg={3}>
+          <p>Small: Span 0 of 4</p>
+          <p>Medium: Span 0 of 8</p>
+          <p>Large: Span 3 of 16</p>
+        </Column>
+      </Grid>
+
+      <h5>Wide</h5>
+      <Grid>
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={8} lg={16}>
+          <Grid>
+            <Column sm={4} md={4} lg={4} />
+            <Column sm={4} md={4} lg={4} />
+            <Column sm={4} md={4} lg={4} />
+            <Column sm={4} md={4} lg={4} />
+          </Grid>
+        </Column>
+      </Grid>
+      <h5>Narrow</h5>
+      <Grid narrow>
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={8} lg={16}>
+          <Grid narrow>
+            <Column sm={4} md={4} lg={4} />
+            <Column sm={4} md={4} lg={4} />
+            <Column sm={4} md={4} lg={4} />
+            <Column sm={4} md={4} lg={4} />
+          </Grid>
+        </Column>
+      </Grid>
+      <h5>Condensed</h5>
+      <Grid condensed>
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={4} lg={4} />
+        <Column sm={4} md={8} lg={16}>
+          <Grid condensed>
+            <Column sm={4} md={4} lg={4} />
+            <Column sm={4} md={4} lg={4} />
+            <Column sm={4} md={4} lg={4} />
+            <Column sm={4} md={4} lg={4} />
+          </Grid>
+        </Column>
+      </Grid>
+    </>
   );
 };