diff --git a/agnosticui-css/flexboxgrid.html b/agnosticui-css/flexboxgrid.html
index e881ba4f7..d56a9fded 100644
--- a/agnosticui-css/flexboxgrid.html
+++ b/agnosticui-css/flexboxgrid.html
@@ -16,8 +16,6 @@
     }
 
     .demo-only {
-      background: #f9f9f9;
-      border: 1px solid #eee;
       padding: 2rem 0;
     }
 
@@ -30,12 +28,37 @@
 
 <body>
 
+  <div class="flexgrid-container">
+    <h1>Gutter opt-in.</h1>
+    <p>By default, we remove magic gutters. But,
+      you can opt back in for them when you need them (cards or boxes
+      are a good example use case) by defining `--agnosticui-gutter-width` in your stylsheet.
+    </p>
+    <style>
+      :root {
+        --agnosticui-gutter-width: 16px;
+      }
+    </style>
+    <div class="row gutter-test demo-only">
+      <div class="col-xs-12 col-sm-3">
+        <p class="demo-only-field">xs={12} --agnosticui-gutter-width set</p>
+      </div>
+      <div class="col-xs-12 col-sm-3">
+        <p class="demo-only-field">xs={12} --agnosticui-gutter-width set</p>
+      </div>
+      <div class="col-xs-12 col-sm-3">
+        <p class="demo-only-field">xs={12} --agnosticui-gutter-width set</p>
+      </div>
+      <div class="col-xs-12 col-sm-3">
+        <p class="demo-only-field">xs={12} --agnosticui-gutter-width set</p>
+      </div>
+    </div>
+  </div>
   <div class="flexgrid-container">
     <h1>Basic Grid</h1>
     <p>Check out the demo storybooks in the framework you're interested in (React, Svelte, Vue, etc.).</p>
-    <p><i>xs</i> = Extra Small. <i>sm</i> = Small. <i>lg</i> = Large.</p>
-    <p>The following breakpoints can be overriden by redefining in your stylesheet and omitting the <i>-default</i>
-      part:</p>
+    <p><i>xs</i> = Extra Small. <i>sm</i> = Small. <i>lg</i> = Large. <i>xl</i> = Extra Large.</p>
+    <p>The following breakpoints are used by FlexGrid:</p>
     <pre>
       --agnosticui-default-sm-min: 576px;
       --agnosticui-default-md-min: 768px;
@@ -63,31 +86,6 @@ <h1>Basic Grid</h1>
       </div>
     </div>
   </div>
-
-  <div class="flexgrid-container">
-    <h1>Auto Width with opt-in gutters on 8pt grid.</h1>
-    <p>By default, we remove magic gutters. But,
-      you can opt back in for them when you need them (cards or boxes
-      are a good example use case) by applying gutter-4, gutter-8, gutter-16,
-      gutter-24, and finally gutter-32 on the row, and then using auto on the columns.
-      You can also do col-xs-12 (or col-sm-12 etc.), to ensure stacking on mobile or tablet
-      if you wish.</p>
-    <p>Here we've used gutter-16 to do so: </p>
-    <div class="row gutter-16 demo-only">
-      <div class="col-xs-12 auto">
-        <p class="demo-only-field">xs={12} auto</p>
-      </div>
-      <div class="col-xs-12 auto">
-        <p class="demo-only-field">xs={12} auto</p>
-      </div>
-      <div class="col-xs-12 auto">
-        <p class="demo-only-field">xs={12} auto</p>
-      </div>
-      <div class="col-xs-12 auto">
-        <p class="demo-only-field">xs={12} auto</p>
-      </div>
-    </div>
-  </div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/showcase/public/index.html b/showcase/public/index.html
index d0fb44ef0..a3d32f19a 100644
--- a/showcase/public/index.html
+++ b/showcase/public/index.html
@@ -41,6 +41,9 @@
       --hljs-accent-8: #009bac;
       --hljs-accent-9: #4f79d5;
 
+      /* For grid gutters */
+      --agnosticui-gutter-width: 48px;
+
       /* For the lofi component cards */
       --agnosticui-card-boxshadow1-offset-x: 0px;
       --agnosticui-card-boxshadow1-offset-y: 1px;
diff --git a/showcase/src/partials/Buttons.vue b/showcase/src/partials/Buttons.vue
index be1cba24e..44202b933 100644
--- a/showcase/src/partials/Buttons.vue
+++ b/showcase/src/partials/Buttons.vue
@@ -12,7 +12,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p>
             Maybe you recognize some of these buttons—if so, it's because most of them originally
             appeared in
@@ -26,7 +26,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p>
             If you're using the CSS AgnosticUI package, you can simply apply the global CSS classes
             you see in the demo below. However, if you're using React, Svelte, or
@@ -40,12 +40,12 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <h6>Core Buttons</h6>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p class="flex">
             <Button>Go</Button>
             <Button isRounded>Go</Button>
@@ -56,7 +56,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
 &lt;button class=&quot;btn&quot;&gt;Go&lt;/button&gt;
 &lt;button class=&quot;btn btn-rounded&quot;&gt;Go&lt;/button&gt;
@@ -67,12 +67,12 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <h6>Primary</h6>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p class="flex">
             <Button mode="primary">Go</Button>
             <Button mode="primary" isRounded>Go</Button>
@@ -83,7 +83,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
 &lt;button class=&quot;btn btn-primary&quot;&gt;Go&lt;/button&gt;
 &lt;button class=&quot;btn btn-primary btn-rounded&quot;&gt;Go&lt;/button&gt;
@@ -94,12 +94,12 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <h6>Secondary</h6>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p class="flex">
             <Button mode="secondary">Go</Button>
             <Button mode="secondary" isRounded>Go</Button>
@@ -110,7 +110,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
 &lt;button class=&quot;btn btn-secondary&quot;&gt;Go&lt;/Button&gt;
 &lt;button class=&quot;btn btn-secondary btn-rounded&quot;&gt;Go&lt;/Button&gt;
@@ -121,19 +121,19 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <h6>Disabled</h6>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p>
             <Button :isDisabled="true">Go</Button>
           </p>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
 &lt;!-- Primary, Secondary, and all variants work the same. Just use the disabled attribute. --&gt;
 &lt;button class=&quot;btn&quot; disabled&gt;Disabled&lt;/Button&gt;
@@ -141,12 +141,12 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <h6>Sizes</h6>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p style="display: initial;">
             <Button size="small">Go</Button>
             <Button>Go</Button>
@@ -155,7 +155,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
 &lt;button class=&quot;btn btn-small&quot;&gt;Small&lt;/Button&gt;
 &lt;button class=&quot;btn&quot;&gt;Regular&lt;/Button&gt;
@@ -164,12 +164,12 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <h6>Block</h6>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p>
             <Button isBlock>Go</Button>
             <Button mode="primary" isBlock>Go</Button>
@@ -178,7 +178,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
 &lt;button class=&quot;btn btn-block&quot;&gt;Go&lt;/Button&gt;
 &lt;button class=&quot;btn btn-primary btn-block&quot;&gt;Go&lt;/Button&gt;
@@ -187,12 +187,12 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <h6>Misc</h6>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p>
             <Button :isSkinned="false">No skin button (if you want to style yourself)</Button>
             <Button isBlank>Blank button</Button>
@@ -200,7 +200,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
 &lt;button class=&quot;btn-base&quot;&gt;Base no skin&lt;/button&gt;
 &lt;button class=&quot;btn btn-blank&quot;&gt;Blank&lt;/button&gt;
@@ -208,12 +208,12 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <h6>Button Icons</h6>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p style="display: flex;">
             <Button mode="primary" v-bind:isRounded="true">
               Call
@@ -262,7 +262,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
 &#x3C;button class=&#x22;btn btn-primary btn-rounded&#x22;&#x3E; Call
   &#x3C;svg
@@ -308,12 +308,12 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <h6>Button Groups</h6>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p>
             <ButtonGroup>
               <Button>One</Button>
@@ -334,7 +334,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
 &lt;div class=&quot;btn-group&quot; role=&quot;group&quot; aria-label=&quot;Button group example&quot;&gt;
   &lt;button class=&quot;btn&quot;&gt;One&lt;/button&gt;
@@ -355,7 +355,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p>
             <ButtonGroup>
               <Button mode="primary">One</Button>
@@ -376,7 +376,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
 &lt;div class=&quot;btn-group&quot; role=&quot;group&quot; aria-label=&quot;Button group example&quot;&gt;
   &lt;button class=&quot;btn btn-primary&quot;&gt;One&lt;/button&gt;
@@ -397,7 +397,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p>
             <ButtonGroup>
               <Button mode="secondary">One</Button>
@@ -418,7 +418,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
 &lt;div class=&quot;btn-group&quot; role=&quot;group&quot; aria-label=&quot;Button group example&quot;&gt;
   &lt;button class=&quot;btn btn-secondary&quot;&gt;One&lt;/button&gt;
diff --git a/showcase/src/partials/Colors.vue b/showcase/src/partials/Colors.vue
index b5491c71a..3998b6d1b 100644
--- a/showcase/src/partials/Colors.vue
+++ b/showcase/src/partials/Colors.vue
@@ -22,7 +22,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <div :class="$style.hotips">
             <p :class="$style.tip">
               <span class="quoted">Colors express the main psychic functions of man.</span>
@@ -93,7 +93,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="css">
 /**
 * You should override these by simply defining them less the `-default` in
diff --git a/showcase/src/partials/Grid.vue b/showcase/src/partials/Grid.vue
index cd925945a..2cf8dc2ce 100644
--- a/showcase/src/partials/Grid.vue
+++ b/showcase/src/partials/Grid.vue
@@ -90,7 +90,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs>
       <code class="html">
 &lt;div class=&quot;flexgrid-container&quot;&gt;
@@ -157,8 +157,6 @@ export default {
 }
 
 .demoOnly {
-  background: #f9f9f9;
-  border: 1px solid #eee;
   padding: 2rem 0;
 }
 
diff --git a/showcase/src/partials/Spacing.vue b/showcase/src/partials/Spacing.vue
index ae462ad78..4112fd15f 100644
--- a/showcase/src/partials/Spacing.vue
+++ b/showcase/src/partials/Spacing.vue
@@ -23,7 +23,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="css">
 /**
  * agnostic-default- is not used here since these are, essentially, literals for
diff --git a/showcase/src/partials/Typography.vue b/showcase/src/partials/Typography.vue
index 098f889b1..879242789 100644
--- a/showcase/src/partials/Typography.vue
+++ b/showcase/src/partials/Typography.vue
@@ -12,7 +12,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <div :class="$style.hotips">
             <p :class="$style.tip">
               <span class="quoted">Make it easy to read.</span>
@@ -59,7 +59,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="css">
 /**
  * These are only meant to be minimal point of departure to work from. You're encouraged
diff --git a/showcase/src/views/InputCards.vue b/showcase/src/views/InputCards.vue
index 9c9d1858f..920fa0751 100644
--- a/showcase/src/views/InputCards.vue
+++ b/showcase/src/views/InputCards.vue
@@ -6,7 +6,7 @@
       </FlexCol>
     </FlexRow>
     <FlexRow v-bind:gutter="16">
-      <FlexCol v-bind:xs="12" auto>
+      <FlexCol v-bind:xs="12" v-bind:sm="3">
         <Card v-bind:isStacked="true">
           <header :class="$style.cardheader">
             <h6>Button</h6>
@@ -16,7 +16,7 @@
           </a>
         </Card>
       </FlexCol>
-      <FlexCol v-bind:xs="12" auto>
+      <FlexCol v-bind:xs="12" v-bind:sm="3">
         <Card v-bind:isStacked="true">
           <header :class="$style.cardheader">
             <h6>Input</h6>
@@ -26,7 +26,7 @@
           </a>
         </Card>
       </FlexCol>
-      <FlexCol v-bind:xs="12" auto>
+      <FlexCol v-bind:xs="12" v-bind:sm="3">
         <Card v-bind:isStacked="true">
           <header :class="$style.cardheader">
             <h6>Textarea</h6>
@@ -36,7 +36,7 @@
           </a>
         </Card>
       </FlexCol>
-      <FlexCol v-bind:xs="12" auto>
+      <FlexCol v-bind:xs="12" v-bind:sm="3">
         <Card v-bind:isStacked="true">
           <header :class="$style.cardheader">
             <h6>Select</h6>
@@ -48,7 +48,7 @@
       </FlexCol>
     </FlexRow>
     <FlexRow :customClasses="$style.row2" v-bind:gutter="16">
-      <FlexCol v-bind:xs="12" auto>
+      <FlexCol v-bind:xs="12" v-bind:sm="3">
         <Card v-bind:isStacked="true">
           <header :class="$style.cardheader">
             <h6>Progress</h6>
@@ -58,7 +58,7 @@
           </a>
         </Card>
       </FlexCol>
-      <FlexCol v-bind:xs="12" auto>
+      <FlexCol v-bind:xs="12" v-bind:sm="3">
         <Card v-bind:isStacked="true">
           <header :class="$style.cardheader">
             <h6>Checkbox</h6>
@@ -68,7 +68,7 @@
           </a>
         </Card>
       </FlexCol>
-      <FlexCol v-bind:xs="12" auto>
+      <FlexCol v-bind:xs="12" v-bind:sm="3">
         <Card v-bind:isStacked="true">
           <header :class="$style.cardheader">
             <h6>Radio</h6>
@@ -78,7 +78,7 @@
           </a>
         </Card>
       </FlexCol>
-      <FlexCol v-bind:xs="12" auto>
+      <FlexCol v-bind:xs="12" v-bind:sm="3">
         <Card v-bind:isStacked="true">
           <header :class="$style.cardheader">
             <h6>Button Select</h6>
diff --git a/showcase/src/views/LayoutCards.vue b/showcase/src/views/LayoutCards.vue
index 8c17034af..e361b14fe 100644
--- a/showcase/src/views/LayoutCards.vue
+++ b/showcase/src/views/LayoutCards.vue
@@ -6,7 +6,7 @@
       </FlexCol>
     </FlexRow>
     <FlexRow v-bind:gutter="16">
-      <FlexCol v-bind:xs="12" auto>
+      <FlexCol v-bind:xs="12" v-bind:sm="3">
         <Card v-bind:isStacked="true">
           <header :class="$style.cardheader">
             <h6>Tabs</h6>
@@ -16,7 +16,7 @@
           </a>
         </Card>
       </FlexCol>
-      <FlexCol v-bind:xs="12" auto>
+      <FlexCol v-bind:xs="12" v-bind:sm="3">
         <Card v-bind:isStacked="true">
           <header :class="$style.cardheader">
             <h6>Card</h6>
@@ -26,7 +26,7 @@
           </a>
         </Card>
       </FlexCol>
-      <FlexCol v-bind:xs="12" auto>
+      <FlexCol v-bind:xs="12" v-bind:sm="3">
         <Card v-bind:isStacked="true">
           <header :class="$style.cardheader">
             <h6>Header</h6>
@@ -36,7 +36,7 @@
           </a>
         </Card>
       </FlexCol>
-      <FlexCol v-bind:xs="12" auto>
+      <FlexCol v-bind:xs="12" v-bind:sm="3">
         <Card v-bind:isStacked="true">
           <header :class="$style.cardheader">
             <h6>Stepper</h6>
diff --git a/showcase/src/views/SystemCards.vue b/showcase/src/views/SystemCards.vue
index ee00b7a28..95349dabe 100644
--- a/showcase/src/views/SystemCards.vue
+++ b/showcase/src/views/SystemCards.vue
@@ -6,7 +6,7 @@
       </FlexCol>
     </FlexRow>
     <FlexRow v-bind:gutter="16">
-      <FlexCol v-bind:xs="12" auto>
+      <FlexCol v-bind:xs="12" v-bind:sm="3">
         <Card v-bind:isStacked="true">
           <header :class="$style.cardheader">
             <h6>Color</h6>
@@ -16,7 +16,7 @@
           </a>
         </Card>
       </FlexCol>
-      <FlexCol v-bind:xs="12" auto>
+      <FlexCol v-bind:xs="12" v-bind:sm="3">
         <Card v-bind:isStacked="true">
           <header :class="$style.cardheader">
             <h6>Typography</h6>
@@ -26,7 +26,7 @@
           </a>
         </Card>
       </FlexCol>
-      <FlexCol v-bind:xs="12" auto>
+      <FlexCol v-bind:xs="12" v-bind:sm="3">
         <Card v-bind:isStacked="true">
           <header :class="$style.cardheader">
             <h6>Spacing</h6>
@@ -36,7 +36,7 @@
           </a>
         </Card>
       </FlexCol>
-      <FlexCol v-bind:xs="12" auto>
+      <FlexCol v-bind:xs="12" v-bind:sm="3">
         <Card v-bind:isStacked="true">
           <header :class="$style.cardheader">
             <h6>Grid</h6>
diff --git a/showcase/src/views/TableCards.vue b/showcase/src/views/TableCards.vue
index a900c497c..57cd58b27 100644
--- a/showcase/src/views/TableCards.vue
+++ b/showcase/src/views/TableCards.vue
@@ -6,7 +6,7 @@
       </FlexCol>
     </FlexRow>
     <FlexRow v-bind:gutter="16">
-      <FlexCol v-bind:xs="12" auto>
+      <FlexCol v-bind:xs="12" v-bind:sm="3">
         <Card v-bind:isStacked="true">
           <header :class="$style.cardheader">
             <h6>Table TBD</h6>
@@ -16,7 +16,7 @@
           </a>
         </Card>
       </FlexCol>
-      <FlexCol v-bind:xs="12" auto>
+      <FlexCol v-bind:xs="12" v-bind:sm="3">
         <Card v-bind:isStacked="true">
           <header :class="$style.cardheader">
             <h6>Sorting tbd</h6>
@@ -26,7 +26,7 @@
           </a>
         </Card>
       </FlexCol>
-      <FlexCol v-bind:xs="12" auto>
+      <FlexCol v-bind:xs="12" v-bind:sm="3">
         <Card v-bind:isStacked="true">
           <header :class="$style.cardheader">
             <h6>Filters tbd</h6>
@@ -36,7 +36,7 @@
           </a>
         </Card>
       </FlexCol>
-      <FlexCol v-bind:xs="12" auto>
+      <FlexCol v-bind:xs="12" v-bind:sm="3">
         <Card v-bind:isStacked="true">
           <header :class="$style.cardheader">
             <h6>Pagination TBD</h6>
