Grid item column fallback

.changeset/lucky-actors-clean.md

@@ -0,0 +1,6 @@
+---
+'@strapi/design-system': major
+'@strapi/ui-primitives': major
+---
+
+Fix grid item column fallback value

docs/stories/Grid.stories.tsx

@@ -47,6 +47,21 @@ export const BaseGrid = {
   name: 'base grid',
 } satisfies Story;
 
+export const GridItemColSizeFallback = {
+  render: () => (
+    <Grid.Root gap={5}>
+      {Array(12)
+        .fill(null)
+        .map((_, i) => (
+          <Grid.Item key={i} background="success200" col={6}>
+            <Typography>Column {i + 1}</Typography>
+          </Grid.Item>
+        ))}
+    </Grid.Root>
+  ),
+  name: 'Column size fallback to col',
+} satisfies Story;
+
 export const ComplexGrid = {
   render: () => (
     <Grid.Root

packages/design-system/src/primitives/Grid/Grid.tsx

@@ -57,15 +57,15 @@ type ItemComponent<C extends React.ElementType = 'div'> = <T extends React.Eleme
 ) => JSX.Element;
 
 const Item = styled(Flex)`
-  grid-column: span ${({ $xs }) => $xs ?? 12};
+  grid-column: span ${({ $xs, $col }) => $xs ?? $col ?? 12};
   max-width: 100%;
 
   ${({ theme }) => theme.breakpoints.small} {
-    grid-column: span ${({ $s, $xs }) => $s ?? $xs ?? 12};
+    grid-column: span ${({ $s, $xs, $col }) => $s ?? $xs ?? $col ?? 12};
   }
 
   ${({ theme }) => theme.breakpoints.medium} {
-    grid-column: span ${({ $m, $s, $xs }) => $m ?? $s ?? $xs ?? 12};
+    grid-column: span ${({ $m, $s, $xs, $col }) => $m ?? $s ?? $xs ?? $col ?? 12};
   }
 
   ${({ theme }) => theme.breakpoints.large} {