diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Default_Story.png b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Default_Story.png
index 230e4983e9..26811fe268 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Default_Story.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Default_Story.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Lg_Breakpoint.png b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Lg_Breakpoint.png
index 4e15f751d9..c3c1cb5912 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Lg_Breakpoint.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Lg_Breakpoint.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Md_Breakpoint.png b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Md_Breakpoint.png
index 5e6b8bfed6..40f94736f1 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Md_Breakpoint.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Md_Breakpoint.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Sm_Breakpoint.png b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Sm_Breakpoint.png
index 4c12e1cc53..7175334ce5 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Sm_Breakpoint.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Sm_Breakpoint.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Xl_Breakpoint.png b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Xl_Breakpoint.png
index be05178948..ab8c7b8a0f 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Xl_Breakpoint.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Xl_Breakpoint.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Xs_Breakpoint.png b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Xs_Breakpoint.png
index 1c448c4863..939a6b0e68 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Xs_Breakpoint.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Xs_Breakpoint.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Default_Story.png b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Default_Story.png
index 7c858ce000..c55a9b1a78 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Default_Story.png and b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Default_Story.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Lg_Breakpoint.png b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Lg_Breakpoint.png
index 9297d385d2..4059f9c851 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Lg_Breakpoint.png and b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Lg_Breakpoint.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Md_Breakpoint.png b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Md_Breakpoint.png
index 1641a16dfb..dda9b1db48 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Md_Breakpoint.png and b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Md_Breakpoint.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Sm_Breakpoint.png b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Sm_Breakpoint.png
index f63e480792..e53ff033cb 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Sm_Breakpoint.png and b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Sm_Breakpoint.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Xl_Breakpoint.png b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Xl_Breakpoint.png
index 61418e28e0..6b4e0f3f90 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Xl_Breakpoint.png and b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Xl_Breakpoint.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Xs_Breakpoint.png b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Xs_Breakpoint.png
index aef31e6946..0d9b772450 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Xs_Breakpoint.png and b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Xs_Breakpoint.png differ
diff --git a/packages/fuselage/src/components/Grid/stories.mdx b/packages/fuselage/src/components/Grid/stories.mdx
index 6573c75e42..195803a2ec 100644
--- a/packages/fuselage/src/components/Grid/stories.mdx
+++ b/packages/fuselage/src/components/Grid/stories.mdx
@@ -43,105 +43,90 @@ import { Grid, Tile } from '../..';
 ### Extra Small (xs)
 
 <Story name='xs breakpoint'>
-  <>
+  <Grid>
     {Array.from({ length: breakpoints.xs.columns }).map((_, i) => i + 1).map((columns) =>
       <React.Fragment key={columns}>
-        <Grid>
-          <Grid.Item xs={columns}>
-            <Tile elevation={1} style={{ padding: 16 }}>xs={columns}</Tile>
-          </Grid.Item>
-          {(breakpoints.xs.columns - columns > 0) &&
-          <Grid.Item xs={breakpoints.xs.columns - columns}>
-            <Tile elevation={1} style={{ padding: 16 }}>xs={breakpoints.xs.columns - columns}</Tile>
-          </Grid.Item>}
-        </Grid>
-        <br />
+        <Grid.Item xs={columns}>
+          <Tile elevation={1} style={{ padding: 16 }}>xs={columns}</Tile>
+        </Grid.Item>
+        {(breakpoints.xs.columns - columns > 0) &&
+        <Grid.Item xs={breakpoints.xs.columns - columns}>
+          <Tile elevation={1} style={{ padding: 16 }}>xs={breakpoints.xs.columns - columns}</Tile>
+        </Grid.Item>}
       </React.Fragment>
     )}
-  </>
+  </Grid>
 </Story>
 
 ### Small (sm)
 
 <Story name='sm breakpoint'>
-  <>
+  <Grid>
     {Array.from({ length: breakpoints.sm.columns }).map((_, i) => i + 1).map((columns) =>
       <React.Fragment key={columns}>
-        <Grid>
-          <Grid.Item sm={columns}>
-            <Tile elevation={1} style={{ padding: 16 }}>sm={columns}</Tile>
-          </Grid.Item>
-          {(breakpoints.sm.columns - columns > 0) &&
-          <Grid.Item sm={breakpoints.sm.columns - columns}>
-            <Tile elevation={1} style={{ padding: 16 }}>sm={breakpoints.sm.columns - columns}</Tile>
-          </Grid.Item>}
-        </Grid>
-        <br />
+        <Grid.Item sm={columns}>
+          <Tile elevation={1} style={{ padding: 16 }}>sm={columns}</Tile>
+        </Grid.Item>
+        {(breakpoints.sm.columns - columns > 0) &&
+        <Grid.Item sm={breakpoints.sm.columns - columns}>
+          <Tile elevation={1} style={{ padding: 16 }}>sm={breakpoints.sm.columns - columns}</Tile>
+        </Grid.Item>}
       </React.Fragment>
     )}
-  </>
+  </Grid>
 </Story>
 
 ### Medium (md)
 
 <Story name='md breakpoint'>
-  <>
+  <Grid>
     {Array.from({ length: breakpoints.md.columns }).map((_, i) => i + 1).map((columns) =>
       <React.Fragment key={columns}>
-        <Grid>
-          <Grid.Item md={columns}>
-            <Tile elevation={1} style={{ padding: 16 }}>md={columns}</Tile>
-          </Grid.Item>
-          {(breakpoints.md.columns - columns > 0) &&
-          <Grid.Item md={breakpoints.md.columns - columns}>
-            <Tile elevation={1} style={{ padding: 16 }}>md={breakpoints.md.columns - columns}</Tile>
-          </Grid.Item>}
-        </Grid>
-        <br />
+        <Grid.Item md={columns}>
+          <Tile elevation={1} style={{ padding: 16 }}>md={columns}</Tile>
+        </Grid.Item>
+        {(breakpoints.md.columns - columns > 0) &&
+        <Grid.Item md={breakpoints.md.columns - columns}>
+          <Tile elevation={1} style={{ padding: 16 }}>md={breakpoints.md.columns - columns}</Tile>
+        </Grid.Item>}
       </React.Fragment>
     )}
-  </>
+  </Grid>
 </Story>
 
 ### Large (lg)
 
 <Story name='lg breakpoint'>
-  <>
+  <Grid>
     {Array.from({ length: breakpoints.lg.columns }).map((_, i) => i + 1).map((columns) =>
       <React.Fragment key={columns}>
-        <Grid>
-          <Grid.Item lg={columns}>
-            <Tile elevation={1} style={{ padding: 16 }}>lg={columns}</Tile>
-          </Grid.Item>
-          {(breakpoints.lg.columns - columns > 0) &&
-          <Grid.Item lg={breakpoints.lg.columns - columns}>
-            <Tile elevation={1} style={{ padding: 16 }}>lg={breakpoints.lg.columns - columns}</Tile>
-          </Grid.Item>}
-        </Grid>
-        <br />
+        <Grid.Item lg={columns}>
+          <Tile elevation={1} style={{ padding: 16 }}>lg={columns}</Tile>
+        </Grid.Item>
+        {(breakpoints.lg.columns - columns > 0) &&
+        <Grid.Item lg={breakpoints.lg.columns - columns}>
+          <Tile elevation={1} style={{ padding: 16 }}>lg={breakpoints.lg.columns - columns}</Tile>
+        </Grid.Item>}
       </React.Fragment>
     )}
-  </>
+  </Grid>
 </Story>
 
 ### Extra Large (xl)
 
 <Story name='xl breakpoint'>
-  <>
+  <Grid>
     {Array.from({ length: breakpoints.xl.columns }).map((_, i) => i + 1).map((columns) =>
       <React.Fragment key={columns}>
-        <Grid>
-          <Grid.Item xl={columns}>
-            <Tile elevation={1} style={{ padding: 16 }}>xl={columns}</Tile>
-          </Grid.Item>
-          {(breakpoints.xl.columns - columns > 0) &&
-          <Grid.Item xl={breakpoints.xl.columns - columns}>
-            <Tile elevation={1} style={{ padding: 16 }}>xl={breakpoints.xl.columns - columns}</Tile>
-          </Grid.Item>}
-        </Grid>
-        <br />
+        <Grid.Item xl={columns}>
+          <Tile elevation={1} style={{ padding: 16 }}>xl={columns}</Tile>
+        </Grid.Item>
+        {(breakpoints.xl.columns - columns > 0) &&
+        <Grid.Item xl={breakpoints.xl.columns - columns}>
+          <Tile elevation={1} style={{ padding: 16 }}>xl={breakpoints.xl.columns - columns}</Tile>
+        </Grid.Item>}
       </React.Fragment>
     )}
-  </>
+  </Grid>
 </Story>
 
diff --git a/packages/fuselage/src/components/Grid/styles.scss b/packages/fuselage/src/components/Grid/styles.scss
index 6436c74aed..538d52af48 100644
--- a/packages/fuselage/src/components/Grid/styles.scss
+++ b/packages/fuselage/src/components/Grid/styles.scss
@@ -17,7 +17,8 @@ $breakpoint-names: map-keys($breakpoints);
 
   @each $breakpoint-name in $breakpoint-names {
     @include when-item-is-on-breakpoint($breakpoint-name) {
-      margin-inline: calc(-1 * #{ to-rem(map-get(map-get($breakpoints, $breakpoint-name), gutter-width)) });
+      margin-block: calc(#{ to-rem(map-get(map-get($breakpoints, $breakpoint-name), gutter-width)) } / -2);
+      margin-inline: calc(#{ to-rem(map-get(map-get($breakpoints, $breakpoint-name), gutter-width)) } / -2);
     }
   }
 }
@@ -28,7 +29,8 @@ $breakpoint-names: map-keys($breakpoints);
 
   @each $breakpoint-name in $breakpoint-names {
     @include when-item-is-on-breakpoint($breakpoint-name) {
-      padding-inline: to-rem(map-get(map-get($breakpoints, $breakpoint-name), gutter-width));
+      padding-block: calc(#{ to-rem(map-get(map-get($breakpoints, $breakpoint-name), gutter-width)) } / 2);
+      padding-inline: calc(#{ to-rem(map-get(map-get($breakpoints, $breakpoint-name), gutter-width)) } / 2);
 
       $total-columns: map-get(map-get($breakpoints, $breakpoint-name), columns);
       @for $columns from 1 through $total-columns {