From 0326f9b75525a1acebaf69ae569c7b4b394a6fd3 Mon Sep 17 00:00:00 2001
From: Mitchell Dodell <31234139+mdodell@users.noreply.github.com>
Date: Sat, 20 Aug 2022 04:37:13 -0700
Subject: [PATCH] [@mantine/core] Grid: Fix offset and order responsive props
 (#2163)

---
 src/mantine-core/src/Grid/Col/Col.styles.ts   | 20 ++++++++++---------
 .../src/demos/core/Grid/Grid.demo.order.tsx   |  6 +++---
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/mantine-core/src/Grid/Col/Col.styles.ts b/src/mantine-core/src/Grid/Col/Col.styles.ts
index 5d7a084f2f2..3b5bc4eb574 100644
--- a/src/mantine-core/src/Grid/Col/Col.styles.ts
+++ b/src/mantine-core/src/Grid/Col/Col.styles.ts
@@ -50,15 +50,17 @@ function getBreakpointsStyles({
   columns: number;
 }) {
   return MANTINE_SIZES.reduce((acc, size) => {
-    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),
-      };
-    }
+    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),
+    };
     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 bd30d356632..c92fadb124d 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>
-      <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.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>
     </Grid>
   );
 }