diff --git a/src/mantine-core/src/Grid/Col/Col.styles.ts b/src/mantine-core/src/Grid/Col/Col.styles.ts
index 3b5bc4eb574..5d7a084f2f2 100644
--- a/src/mantine-core/src/Grid/Col/Col.styles.ts
+++ b/src/mantine-core/src/Grid/Col/Col.styles.ts
@@ -50,17 +50,15 @@ function getBreakpointsStyles({
   columns: number;
 }) {
   return MANTINE_SIZES.reduce((acc, size) => {
-    acc[`@media (min-width: ${theme.breakpoints[size] + 1}px)`] = {
-      order: orders[size],
-      flexBasis: typeof sizes[size] === 'number' ? getColumnWidth(sizes[size], columns) : 'auto',
-      flexShrink: 0,
-      maxWidth: grow
-        ? 'unset'
-        : typeof sizes[size] === 'number'
-        ? getColumnWidth(sizes[size], columns)
-        : 'none',
-      marginLeft: getColumnOffset(offsets[size], columns),
-    };
+    if (typeof sizes[size] === 'number') {
+      acc[`@media (min-width: ${theme.breakpoints[size] + 1}px)`] = {
+        order: orders[size],
+        flexBasis: getColumnWidth(sizes[size], columns),
+        flexShrink: 0,
+        maxWidth: grow ? 'unset' : getColumnWidth(sizes[size], columns),
+        marginLeft: getColumnOffset(offsets[size], columns),
+      };
+    }
     return acc;
   }, {});
 }
diff --git a/src/mantine-demos/src/demos/core/Grid/Grid.demo.order.tsx b/src/mantine-demos/src/demos/core/Grid/Grid.demo.order.tsx
index c92fadb124d..bd30d356632 100644
--- a/src/mantine-demos/src/demos/core/Grid/Grid.demo.order.tsx
+++ b/src/mantine-demos/src/demos/core/Grid/Grid.demo.order.tsx
@@ -8,9 +8,9 @@ import { Grid } from '@mantine/core';
 function Demo() {
   return (
     <Grid>
-      <Grid.Col span={3} order={2} orderSm={1} orderLg={3}>2</Grid.Col>
-      <Grid.Col span={3} order={3} orderSm={1} orderLg={2}>3</Grid.Col>
-      <Grid.Col span={3} order={1} orderSm={3} orderLg={1}>1</Grid.Col>
+      <Col span={3} order={2} orderSm={1} orderLg={3}>2</Col>
+      <Col span={3} order={3} orderSm={1} orderLg={2}>3</Col>
+      <Col span={3} order={1} orderSm={3} orderLg={1}>1</Col>
     </Grid>
   );
 }