From b7ba5d5728b444939864fc2dec72c8529402bf45 Mon Sep 17 00:00:00 2001
From: Vitaly Rtishchev <rtivital@gmail.com>
Date: Sat, 24 Sep 2022 11:31:15 +0400
Subject: [PATCH] [@mantine/core] Grid: Fix offset={0} not working (#2346)

---
 src/mantine-core/src/Grid/Col/Col.styles.ts |  2 +-
 src/mantine-core/src/Grid/Grid.story.tsx    | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/mantine-core/src/Grid/Col/Col.styles.ts b/src/mantine-core/src/Grid/Col/Col.styles.ts
index c36a794c1f7..521964c5fd0 100644
--- a/src/mantine-core/src/Grid/Col/Col.styles.ts
+++ b/src/mantine-core/src/Grid/Col/Col.styles.ts
@@ -57,7 +57,7 @@ const getColumnFlexGrow = (colSpan: ColSpan, grow: boolean) => {
 };
 
 const getColumnOffset = (offset: number, columns: number) =>
-  offset ? `${100 / (columns / offset)}%` : undefined;
+  offset === 0 ? 0 : offset ? `${100 / (columns / offset)}%` : undefined;
 
 function getBreakpointsStyles({
   sizes,
diff --git a/src/mantine-core/src/Grid/Grid.story.tsx b/src/mantine-core/src/Grid/Grid.story.tsx
index db38cc8be39..7b7a35fd222 100644
--- a/src/mantine-core/src/Grid/Grid.story.tsx
+++ b/src/mantine-core/src/Grid/Grid.story.tsx
@@ -15,3 +15,16 @@ export function UnexpectedRowBreak() {
     </Grid>
   );
 }
+
+export function Offset0() {
+  return (
+    <Grid>
+      <Grid.Col sx={{ backgroundColor: 'pink' }} span={3} offset={2} offsetSm={0}>
+        Column 1
+      </Grid.Col>
+      <Grid.Col sx={{ backgroundColor: 'silver' }} span={7}>
+        Column 2
+      </Grid.Col>
+    </Grid>
+  );
+}