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>
+  );
+}