[@mantine/core] Grid: Fix offset={0} not working (#2346)

mantinedev · Sep 24, 2022 · b7ba5d5 · b7ba5d5
1 parent e6aa524
commit b7ba5d5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git 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
@@ -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>
+  );
+}