diff --git a/core/src/components/col/col.tsx b/core/src/components/col/col.tsx
index 0c78f492a3..ae08db84a6 100644
--- a/core/src/components/col/col.tsx
+++ b/core/src/components/col/col.tsx
@@ -192,12 +192,14 @@ export class Col {
       return;
     }
 
-    const colSize = SUPPORTS_VARS
+    // If the size is set to auto then don't calculate a size
+    const colSize = (columns === 'auto')
+      ? 'auto'
       // If CSS supports variables we should use the grid columns var
-      ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
-      // Convert the columns to a percentage by dividing by the total number
-      // of columns (12) and then multiplying by 100
-      : ((columns / 12) * 100) + '%';
+      : SUPPORTS_VARS ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
+        // Convert the columns to a percentage by dividing by the total number
+        // of columns (12) and then multiplying by 100
+        : ((columns / 12) * 100) + '%';
 
     return {
       'flex': `0 0 ${colSize}`,
diff --git a/core/src/components/grid/test/sizes/index.html b/core/src/components/grid/test/sizes/index.html
index 203a678b75..ae0d31c413 100644
--- a/core/src/components/grid/test/sizes/index.html
+++ b/core/src/components/grid/test/sizes/index.html
@@ -50,6 +50,32 @@
         </ion-row>
       </ion-grid>
 
+      <h2 padding-start>Size auto</h2>
+      <ion-grid>
+        <ion-row>
+          <ion-col>
+            <div>
+              ion-col
+            </div>
+          </ion-col>
+          <ion-col size="auto">
+            <div>
+              ion-col with extra text to make it auto
+            </div>
+          </ion-col>
+          <ion-col>
+            <div>
+              ion-col
+            </div>
+          </ion-col>
+          <ion-col>
+            <div>
+              ion-col
+            </div>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+
       <h2 padding-start>Breakpoint Sizes</h2>
       <ion-grid>
         <ion-row>