diff --git a/packages/react/.storybook/_container.scss b/packages/react/.storybook/_container.scss
index 5a6492909eb..450db13b05d 100644
--- a/packages/react/.storybook/_container.scss
+++ b/packages/react/.storybook/_container.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2020
+// Copyright IBM Corp. 2016, 2021
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -90,3 +90,7 @@ div[role='main'] {
     list-style: decimal;
   }
 }
+
+.bx--grid--card {
+  padding-top: 1rem;
+}
diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
index a59cc30f224..9b8a171fac4 100644
--- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
@@ -3303,7 +3303,7 @@ exports[`Storyshots Components|Card Default 1`] = `
       className="bx--card--white"
     >
       <div
-        className="bx--grid"
+        className="bx--grid bx--grid--card"
       >
         <div
           className="bx--row"
@@ -9284,13 +9284,13 @@ exports[`Storyshots Components|CardLink Default 1`] = `
     role="main"
   >
     <div
-      className="bx--grid bx--grid--condensed"
+      className="bx--grid bx--grid--card bx--grid--condensed"
     >
       <div
         className="bx--row"
       >
         <div
-          className="bx--col-sm-4 bx--col-md-4 bx--col-lg-4 bx--offset-lg-4"
+          className="bx--col-sm-4 bx--col-md-3 bx--col-lg-6 bx--col-xlg-4 bx--no-gutter"
         >
           <CardLink
             card={
diff --git a/packages/react/src/components/Card/__stories__/Card.stories.js b/packages/react/src/components/Card/__stories__/Card.stories.js
index 69947c7a4c2..3990c9e0908 100644
--- a/packages/react/src/components/Card/__stories__/Card.stories.js
+++ b/packages/react/src/components/Card/__stories__/Card.stories.js
@@ -65,7 +65,7 @@ export const Default = ({ parameters }) => {
 
   return (
     <div className={`bx--card--${theme}`}>
-      <div className="bx--grid">
+      <div className="bx--grid bx--grid--card">
         <div className="bx--row">
           <div className="bx--col-sm-4 bx--col-md-3 bx--col-lg-6 bx--col-xlg-4 bx--no-gutter">
             <Card {...(parameters?.props?.Card ?? {})} />
diff --git a/packages/react/src/components/CardLink/__stories__/CardLink.stories.js b/packages/react/src/components/CardLink/__stories__/CardLink.stories.js
index 5c7d5bd5209..94f8e6d79d7 100644
--- a/packages/react/src/components/CardLink/__stories__/CardLink.stories.js
+++ b/packages/react/src/components/CardLink/__stories__/CardLink.stories.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -56,9 +56,9 @@ export const Default = ({ parameters }) => {
   const { card, disabled } = parameters?.props?.CardLink ?? {};
 
   return (
-    <div className="bx--grid bx--grid--condensed">
+    <div className="bx--grid bx--grid--card bx--grid--condensed">
       <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-md-4 bx--col-lg-4 bx--offset-lg-4">
+        <div className="bx--col-sm-4 bx--col-md-3 bx--col-lg-6 bx--col-xlg-4 bx--no-gutter">
           <CardLink card={card} disabled={disabled} />
         </div>
       </div>
diff --git a/packages/web-components/.storybook/container.scss b/packages/web-components/.storybook/container.scss
index 77d182a6089..4cbcae43614 100644
--- a/packages/web-components/.storybook/container.scss
+++ b/packages/web-components/.storybook/container.scss
@@ -81,8 +81,18 @@ body {
 .dds-ce-demo-devenv--simple-grid--content-layout--with-complementary {
   > * {
     grid-column: 1 / span 4;
+  }
+}
 
-    @include carbon--breakpoint('md') {
+@include carbon--breakpoint('md') {
+  .dds-ce-demo-devenv--simple-grid--card > * {
+    grid-column: 1 / span 3;
+  }
+  .dds-ce-demo-devenv--simple-grid--callout,
+  .dds-ce-demo-devenv--simple-grid--card-group,
+  .dds-ce-demo-devenv--simple-grid--content-layout,
+  .dds-ce-demo-devenv--simple-grid--content-layout--with-complementary {
+    > * {
       grid-column: 1 / span 8;
     }
   }
@@ -93,7 +103,10 @@ body {
     grid-column: 5 / span 12;
   }
 
-  .dds-ce-demo-devenv--simple-grid--card,
+  .dds-ce-demo-devenv--simple-grid--card > * {
+    grid-column: 1 / span 6;
+  }
+
   .dds-ce-demo-devenv--simple-grid--content-layout {
     > * {
       grid-column: 5 / span 8;
@@ -109,6 +122,12 @@ body {
   }
 }
 
+@include carbon--breakpoint('xlg') {
+  .dds-ce-demo-devenv--simple-grid--card > * {
+    grid-column: 1 / span 4;
+  }
+}
+
 .dds-ce-demo-devenv--container--has-card-group,
 .dds-ce-demo-devenv--container--has-card-group-standalone {
   padding: 0;
diff --git a/packages/web-components/src/components/card/__stories__/card.stories.ts b/packages/web-components/src/components/card/__stories__/card.stories.ts
index 7c0fb6454b8..92a2e34d556 100644
--- a/packages/web-components/src/components/card/__stories__/card.stories.ts
+++ b/packages/web-components/src/components/card/__stories__/card.stories.ts
@@ -102,11 +102,7 @@ export default {
   decorators: [
     story => html`
       <div class="dds-ce-demo-devenv--simple-grid dds-ce-demo-devenv--simple-grid--card">
-        <div class="bx--row dds-ce-demo-devenv--grid-row">
-          <div class="bx--col-sm-4 bx--col-md-3 bx--col-lg-12 bx--col-xlg-8 bx--no-gutter">
-            ${story()}
-          </div>
-        </div>
+        ${story()}
       </div>
     `,
   ],