diff --git a/ui_framework/components/card/_card_group.scss b/ui_framework/components/card/_card_group.scss
index 4f9f56ff42417..940d1f3df0cf3 100644
--- a/ui_framework/components/card/_card_group.scss
+++ b/ui_framework/components/card/_card_group.scss
@@ -1,20 +1,36 @@
+/**
+ * 1. Use this container to offset the spacing between wrapped cards.
+ */
+.kuiCardGroupContainer {
+  margin: -$cardSpacing; /* 1 */
+}
+
+/**
+ * 1. Wrap cards when necessary.
+ */
 .kuiCardGroup {
   display: flex;
+  flex-wrap: wrap; /* 1 */
 }
 
+  /**
+   * 1. Use the defined width of the card to determine when to wrap.
+   * 2. Use an even margin all around the card so that the spacing is still even when wrapped.
+   */
   .kuiCardGroup__card {
-    flex: 1 1 0%;
-
-    & + & {
-      margin-left: 30px;
-    }
+    flex: 1 1 auto; /* 1 */
+    margin: $cardSpacing; /* 2 */
   }
 
   .kuiCardGroup__cardDescription {
     flex: 1 1 auto;
   }
 
+/**
+ * 1. There's no way to make this look good when wrapped.
+ */
 .kuiCardGroup--united {
+  flex-wrap: nowrap; /* 1 */
   border: 1px solid $cardBorderColor;
   border-radius: $globalBorderRadius;
   overflow: hidden;
@@ -25,7 +41,7 @@
   }
 
   .kuiCardGroup__card + .kuiCardGroup__card {
-    margin-left: 0;
+    margin: 0;
     border-left: 1px solid $cardBorderColor;
   }
 }
diff --git a/ui_framework/components/card/_index.scss b/ui_framework/components/card/_index.scss
index 23b495e39c89e..f7d55aee5fb4d 100644
--- a/ui_framework/components/card/_index.scss
+++ b/ui_framework/components/card/_index.scss
@@ -1,3 +1,4 @@
+$cardSpacing: 15px;
 $cardBorderColor: #E0E0E0;
 $cardMaxWidth: calc(100% - 48px);
 
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index 58487342ba69d..51906f40868a4 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -509,19 +509,38 @@ body {
   font-size: 14px;
   padding: 0 15px 20px; }
 
+/**
+ * 1. Use this container to offset the spacing between wrapped cards.
+ */
+.kuiCardGroupContainer {
+  margin: -15px;
+  /* 1 */ }
+
+/**
+ * 1. Wrap cards when necessary.
+ */
 .kuiCardGroup {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
-  display: flex; }
+  display: flex;
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+  /* 1 */ }
 
+/**
+   * 1. Use the defined width of the card to determine when to wrap.
+   * 2. Use an even margin all around the card so that the spacing is still even when wrapped.
+   */
 .kuiCardGroup__card {
   -webkit-box-flex: 1;
-  -webkit-flex: 1 1 0%;
-      -ms-flex: 1 1 0%;
-          flex: 1 1 0%; }
-  .kuiCardGroup__card + .kuiCardGroup__card {
-    margin-left: 30px; }
+  -webkit-flex: 1 1 auto;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+  /* 1 */
+  margin: 15px;
+  /* 2 */ }
 
 .kuiCardGroup__cardDescription {
   -webkit-box-flex: 1;
@@ -529,7 +548,14 @@ body {
       -ms-flex: 1 1 auto;
           flex: 1 1 auto; }
 
+/**
+ * 1. There's no way to make this look good when wrapped.
+ */
 .kuiCardGroup--united {
+  -webkit-flex-wrap: nowrap;
+      -ms-flex-wrap: nowrap;
+          flex-wrap: nowrap;
+  /* 1 */
   border: 1px solid #E0E0E0;
   border-radius: 4px;
   overflow: hidden; }
@@ -537,7 +563,7 @@ body {
     border: none;
     border-radius: 0; }
   .kuiCardGroup--united .kuiCardGroup__card + .kuiCardGroup__card {
-    margin-left: 0;
+    margin: 0;
     border-left: 1px solid #E0E0E0; }
 
 .kuiCollapseButton {
diff --git a/ui_framework/doc_site/src/views/card/card_group.html b/ui_framework/doc_site/src/views/card/card_group.html
index adce4280f4330..e9763ccda4f2b 100644
--- a/ui_framework/doc_site/src/views/card/card_group.html
+++ b/ui_framework/doc_site/src/views/card/card_group.html
@@ -1,42 +1,44 @@
-<div class="kuiCardGroup">
-  <div class="kuiCard kuiCardGroup__card">
-    <div class="kuiCard__description kuiCardGroup__cardDescription">
-      <div class="kuiCard__descriptionTitle">
-        Get a banana
+<div class="kuiCardGroupContainer">
+  <div class="kuiCardGroup">
+    <div class="kuiCard kuiCardGroup__card">
+      <div class="kuiCard__description kuiCardGroup__cardDescription">
+        <div class="kuiCard__descriptionTitle">
+          Get a banana
+        </div>
+
+        <div class="kuiCard__descriptionText">
+          Bananas are yellow, fit easily in the hand, and have a lot of potassium or something.
+        </div>
       </div>
 
-      <div class="kuiCard__descriptionText">
-        Bananas are yellow, fit easily in the hand, and have a lot of potassium or something.
+      <div class="kuiCard__footer">
+        <a class="kuiButton kuiButton--basic" href="#">
+          Banana!
+        </a>
       </div>
     </div>
 
-    <div class="kuiCard__footer">
-      <a class="kuiButton kuiButton--basic" href="#">
-        Banana!
-      </a>
-    </div>
-  </div>
+    <div class="kuiCard kuiCardGroup__card">
+      <div class="kuiCard__description kuiCardGroup__cardDescription">
+        <div class="kuiCard__descriptionTitle">
+          Get a pteradactyl
+        </div>
 
-  <div class="kuiCard kuiCardGroup__card">
-    <div class="kuiCard__description kuiCardGroup__cardDescription">
-      <div class="kuiCard__descriptionTitle">
-        Get a pteradactyl
+        <div class="kuiCard__descriptionText">
+          Pteradactyls can fly, like to squawk all the time, and are difficult to spell correctly.
+        </div>
       </div>
 
-      <div class="kuiCard__descriptionText">
-        Pteradactyls can fly, like to squawk all the time, and are difficult to spell correctly.
+      <div class="kuiCard__footer">
+        <a
+          class="kuiButton kuiButton--primary"
+          href="https://www.elastic.co/subscriptions/xpack"
+          target="_blank"
+        >
+          Pteradactyl!
+        </a>
       </div>
     </div>
-
-    <div class="kuiCard__footer">
-      <a
-        class="kuiButton kuiButton--primary"
-        href="https://www.elastic.co/subscriptions/xpack"
-        target="_blank"
-      >
-        Pteradactyl!
-      </a>
-    </div>
   </div>
 </div>