diff --git a/packages/canon/src/components/Grid/Grid.props.ts b/packages/canon/src/components/Grid/Grid.props.ts
new file mode 100644
index 0000000000..a918af6187
--- /dev/null
+++ b/packages/canon/src/components/Grid/Grid.props.ts
@@ -0,0 +1,93 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { PropDef, GetPropDefTypes } from '../../props/prop-def';
+
+const columnsValues = [
+  '1',
+  '2',
+  '3',
+  '4',
+  '5',
+  '6',
+  '7',
+  '8',
+  '9',
+  '10',
+  '11',
+  '12',
+  'auto',
+] as const;
+
+/** @public */
+const gridPropDefs = {
+  columns: {
+    type: 'enum | string',
+    className: 'cu-columns',
+    customProperties: ['--columns'],
+    values: columnsValues,
+    responsive: true,
+    default: 'auto',
+  },
+} satisfies {
+  columns: PropDef<(typeof columnsValues)[number]>;
+};
+
+/** @public */
+const gridItemPropDefs = {
+  colSpan: {
+    type: 'enum | string',
+    className: 'cu-col-span',
+    customProperties: ['--col-span'],
+    values: columnsValues,
+    responsive: true,
+  },
+  colEnd: {
+    type: 'enum | string',
+    className: 'cu-col-end',
+    customProperties: ['--col-end'],
+    values: columnsValues,
+    responsive: true,
+  },
+  colStart: {
+    type: 'enum | string',
+    className: 'cu-col-start',
+    customProperties: ['--col-start'],
+    values: columnsValues,
+    responsive: true,
+  },
+  rowSpan: {
+    type: 'enum | string',
+    className: 'cu-row-span',
+    customProperties: ['--row-span'],
+    values: columnsValues,
+    responsive: true,
+  },
+} satisfies {
+  colSpan: PropDef<(typeof columnsValues)[number]>;
+  colEnd: PropDef<(typeof columnsValues)[number]>;
+  colStart: PropDef<(typeof columnsValues)[number]>;
+  rowSpan: PropDef<(typeof columnsValues)[number]>;
+};
+
+/** @public */
+type GridOwnProps = GetPropDefTypes<typeof gridPropDefs>;
+
+/** @public */
+type GridItemOwnProps = GetPropDefTypes<typeof gridItemPropDefs>;
+
+export { gridPropDefs, gridItemPropDefs };
+export type { GridOwnProps, GridItemOwnProps };
diff --git a/packages/canon/src/components/Grid/Grid.stories.tsx b/packages/canon/src/components/Grid/Grid.stories.tsx
index 8d235cd736..ebffe29bc0 100644
--- a/packages/canon/src/components/Grid/Grid.stories.tsx
+++ b/packages/canon/src/components/Grid/Grid.stories.tsx
@@ -33,7 +33,7 @@ const meta = {
     },
   },
   args: {
-    gap: 'xs',
+    gap: '4',
   },
 } satisfies Meta<typeof Grid>;
 
@@ -66,7 +66,7 @@ export const Default: Story = {
 
 export const LargeGap: Story = {
   args: {
-    gap: 'lg',
+    gap: '64px',
   },
   render: args => (
     <Grid {...args}>
@@ -79,17 +79,16 @@ export const LargeGap: Story = {
 
 export const ColumnSizes: Story = {
   args: {
-    columns: 12,
-    gap: 'md',
+    columns: '12',
   },
   render: args => (
-    <Stack gap="md">
+    <Stack gap="4">
       {Array.from({ length: 11 }, (_, i) => (
         <Grid {...args} key={i}>
-          <Grid.Item colSpan={(i + 1) as GridItemProps['colSpan']}>
+          <Grid.Item colSpan={String(i + 1) as GridItemProps['colSpan']}>
             <FakeBox />
           </Grid.Item>
-          <Grid.Item colSpan={(11 - i) as GridItemProps['colSpan']}>
+          <Grid.Item colSpan={String(11 - i) as GridItemProps['colSpan']}>
             <FakeBox />
           </Grid.Item>
         </Grid>
@@ -100,13 +99,12 @@ export const ColumnSizes: Story = {
 
 export const RowAndColumns: Story = {
   args: {
-    columns: 12,
-    gap: 'md',
+    columns: '12',
   },
   render: args => (
     <Stack gap="md">
-      <Grid {...args} columns={3}>
-        <Grid.Item colSpan={1} rowSpan={2}>
+      <Grid {...args} columns="3">
+        <Grid.Item colSpan="1" rowSpan="2">
           <Box
             style={{
               height: '100%',
@@ -118,10 +116,10 @@ export const RowAndColumns: Story = {
             }}
           />
         </Grid.Item>
-        <Grid.Item colSpan={2}>
+        <Grid.Item colSpan="2">
           <FakeBox />
         </Grid.Item>
-        <Grid.Item colSpan={2}>
+        <Grid.Item colSpan="2">
           <FakeBox />
         </Grid.Item>
       </Grid>
diff --git a/packages/canon/src/components/Grid/Grid.tsx b/packages/canon/src/components/Grid/Grid.tsx
index fc12695006..aedce886ed 100644
--- a/packages/canon/src/components/Grid/Grid.tsx
+++ b/packages/canon/src/components/Grid/Grid.tsx
@@ -15,40 +15,40 @@
  */
 
 import { createElement, forwardRef } from 'react';
-import { GridItemProps, GridProps } from './types';
-import { getClassNames } from '../../utils/getClassNames';
+import { gapPropDefs } from '../../props/gap-props';
+import { extractProps } from '../../utils/extractProps';
+import { gridItemPropDefs, gridPropDefs } from './Grid.props';
 import clsx from 'clsx';
+import type { GridItemProps, GridProps } from './types';
 
 const GridBase = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
-  const {
-    children,
-    gap = 'xs',
-    columns = 'auto',
-    className,
-    style,
-    ...restProps
-  } = props;
+  const propDefs = {
+    ...gapPropDefs,
+    ...gridPropDefs,
+  };
 
-  const utilityClassNames = getClassNames({ gap, columns, ...restProps });
+  const { className, style } = extractProps(props, propDefs);
 
   return createElement('div', {
     ref,
-    className: clsx('canon-Grid', utilityClassNames, className),
+    className: clsx('canon-Grid', className),
     style,
-    children,
+    children: props.children,
   });
 });
 
 const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
-  const { children, className, style, ...restProps } = props;
+  const propDefs = {
+    ...gridItemPropDefs,
+  };
 
-  const utilityClassNames = getClassNames(restProps);
+  const { className, style } = extractProps(props, propDefs);
 
   return createElement('div', {
     ref,
-    className: clsx('canon-GridItem', utilityClassNames, className),
+    className: clsx('canon-GridItem', className),
     style,
-    children,
+    children: props.children,
   });
 });
 
diff --git a/packages/canon/src/components/Grid/types.ts b/packages/canon/src/components/Grid/types.ts
index 4e154f03b7..8d658fff70 100644
--- a/packages/canon/src/components/Grid/types.ts
+++ b/packages/canon/src/components/Grid/types.ts
@@ -14,24 +14,26 @@
  * limitations under the License.
  */
 
-import type { UtilityProps, SpaceProps } from '../../types';
+import type { GapProps } from '../../props/gap-props';
+import type { SpaceProps } from '../../types';
+import type { GridItemOwnProps, GridOwnProps } from './Grid.props';
 
 /** @public */
 export interface GridProps extends SpaceProps {
   children?: React.ReactNode;
   className?: string;
-  columns?: UtilityProps['columns'];
-  gap?: UtilityProps['gap'];
+  columns?: GridOwnProps['columns'];
+  gap?: GapProps['gap'];
   style?: React.CSSProperties;
 }
 
 /** @public */
 export interface GridItemProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   className?: string;
-  colSpan?: UtilityProps['colSpan'];
-  colEnd?: UtilityProps['colEnd'];
-  colStart?: UtilityProps['colStart'];
-  rowSpan?: UtilityProps['rowSpan'];
+  colSpan?: GridItemOwnProps['colSpan'];
+  colEnd?: GridItemOwnProps['colEnd'];
+  colStart?: GridItemOwnProps['colStart'];
+  rowSpan?: GridItemOwnProps['rowSpan'];
   style?: React.CSSProperties;
 }
diff --git a/packages/canon/src/css/utilities.css b/packages/canon/src/css/utilities.css
index 81e862d7e1..60f5d886d9 100644
--- a/packages/canon/src/css/utilities.css
+++ b/packages/canon/src/css/utilities.css
@@ -61,3 +61,9 @@
 
 /* Position */
 @import './utilities/position.css';
+
+/* Grid */
+@import './utilities/grid.css';
+
+/* Gap */
+@import './utilities/gap.css';
diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css
index 78bc0a6f8d..5c152fb86f 100644
--- a/packages/canon/src/css/utilities/2xl.css
+++ b/packages/canon/src/css/utilities/2xl.css
@@ -49,170 +49,6 @@
       border-style: solid;
     }
 
-    .cu-2xl-col-end-1 {
-      grid-column-end: 1;
-    }
-
-    .cu-2xl-col-end-10 {
-      grid-column-end: 10;
-    }
-
-    .cu-2xl-col-end-11 {
-      grid-column-end: 11;
-    }
-
-    .cu-2xl-col-end-12 {
-      grid-column-end: 12;
-    }
-
-    .cu-2xl-col-end-13 {
-      grid-column-end: 13;
-    }
-
-    .cu-2xl-col-end-2 {
-      grid-column-end: 2;
-    }
-
-    .cu-2xl-col-end-3 {
-      grid-column-end: 3;
-    }
-
-    .cu-2xl-col-end-4 {
-      grid-column-end: 4;
-    }
-
-    .cu-2xl-col-end-5 {
-      grid-column-end: 5;
-    }
-
-    .cu-2xl-col-end-6 {
-      grid-column-end: 6;
-    }
-
-    .cu-2xl-col-end-7 {
-      grid-column-end: 7;
-    }
-
-    .cu-2xl-col-end-8 {
-      grid-column-end: 8;
-    }
-
-    .cu-2xl-col-end-9 {
-      grid-column-end: 9;
-    }
-
-    .cu-2xl-col-end-auto {
-      grid-column-end: auto;
-    }
-
-    .cu-2xl-col-span-1 {
-      grid-column: span 1 / span 1;
-    }
-
-    .cu-2xl-col-span-10 {
-      grid-column: span 10 / span 10;
-    }
-
-    .cu-2xl-col-span-11 {
-      grid-column: span 11 / span 11;
-    }
-
-    .cu-2xl-col-span-12 {
-      grid-column: span 12 / span 12;
-    }
-
-    .cu-2xl-col-span-2 {
-      grid-column: span 2 / span 2;
-    }
-
-    .cu-2xl-col-span-3 {
-      grid-column: span 3 / span 3;
-    }
-
-    .cu-2xl-col-span-4 {
-      grid-column: span 4 / span 4;
-    }
-
-    .cu-2xl-col-span-5 {
-      grid-column: span 5 / span 5;
-    }
-
-    .cu-2xl-col-span-6 {
-      grid-column: span 6 / span 6;
-    }
-
-    .cu-2xl-col-span-7 {
-      grid-column: span 7 / span 7;
-    }
-
-    .cu-2xl-col-span-8 {
-      grid-column: span 8 / span 8;
-    }
-
-    .cu-2xl-col-span-9 {
-      grid-column: span 9 / span 9;
-    }
-
-    .cu-2xl-col-span-auto {
-      grid-column: span auto / span auto;
-    }
-
-    .cu-2xl-col-start-1 {
-      grid-column-start: 1;
-    }
-
-    .cu-2xl-col-start-10 {
-      grid-column-start: 10;
-    }
-
-    .cu-2xl-col-start-11 {
-      grid-column-start: 11;
-    }
-
-    .cu-2xl-col-start-12 {
-      grid-column-start: 12;
-    }
-
-    .cu-2xl-col-start-13 {
-      grid-column-start: 13;
-    }
-
-    .cu-2xl-col-start-2 {
-      grid-column-start: 2;
-    }
-
-    .cu-2xl-col-start-3 {
-      grid-column-start: 3;
-    }
-
-    .cu-2xl-col-start-4 {
-      grid-column-start: 4;
-    }
-
-    .cu-2xl-col-start-5 {
-      grid-column-start: 5;
-    }
-
-    .cu-2xl-col-start-6 {
-      grid-column-start: 6;
-    }
-
-    .cu-2xl-col-start-7 {
-      grid-column-start: 7;
-    }
-
-    .cu-2xl-col-start-8 {
-      grid-column-start: 8;
-    }
-
-    .cu-2xl-col-start-9 {
-      grid-column-start: 9;
-    }
-
-    .cu-2xl-col-start-auto {
-      grid-column-start: auto;
-    }
-
     .cu-2xl-flex {
       display: flex;
     }
@@ -237,90 +73,6 @@
       flex-wrap: wrap-reverse;
     }
 
-    .cu-2xl-gap-2xl {
-      gap: var(--canon-space-12);
-    }
-
-    .cu-2xl-gap-lg {
-      gap: var(--canon-space-8);
-    }
-
-    .cu-2xl-gap-md {
-      gap: var(--canon-space-6);
-    }
-
-    .cu-2xl-gap-none {
-      gap: 0;
-    }
-
-    .cu-2xl-gap-sm {
-      gap: var(--canon-space-4);
-    }
-
-    .cu-2xl-gap-xl {
-      gap: var(--canon-space-10);
-    }
-
-    .cu-2xl-gap-xs {
-      gap: var(--canon-space-3);
-    }
-
-    .cu-2xl-grid {
-      display: grid;
-    }
-
-    .cu-2xl-grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-auto {
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
-
     .cu-2xl-hidden {
       display: none;
     }
@@ -405,58 +157,6 @@
       border-radius: var(--canon-radius-2);
     }
 
-    .cu-2xl-row-span-1 {
-      grid-row: span 1 / span 1;
-    }
-
-    .cu-2xl-row-span-10 {
-      grid-row: span 10 / span 10;
-    }
-
-    .cu-2xl-row-span-11 {
-      grid-row: span 11 / span 11;
-    }
-
-    .cu-2xl-row-span-12 {
-      grid-row: span 12 / span 12;
-    }
-
-    .cu-2xl-row-span-2 {
-      grid-row: span 2 / span 2;
-    }
-
-    .cu-2xl-row-span-3 {
-      grid-row: span 3 / span 3;
-    }
-
-    .cu-2xl-row-span-4 {
-      grid-row: span 4 / span 4;
-    }
-
-    .cu-2xl-row-span-5 {
-      grid-row: span 5 / span 5;
-    }
-
-    .cu-2xl-row-span-6 {
-      grid-row: span 6 / span 6;
-    }
-
-    .cu-2xl-row-span-7 {
-      grid-row: span 7 / span 7;
-    }
-
-    .cu-2xl-row-span-8 {
-      grid-row: span 8 / span 8;
-    }
-
-    .cu-2xl-row-span-9 {
-      grid-row: span 9 / span 9;
-    }
-
-    .cu-2xl-row-span-auto {
-      grid-row: span auto / span auto;
-    }
-
     .cu-2xl-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
diff --git a/packages/canon/src/css/utilities/gap.css b/packages/canon/src/css/utilities/gap.css
new file mode 100644
index 0000000000..c86c91b958
--- /dev/null
+++ b/packages/canon/src/css/utilities/gap.css
@@ -0,0 +1,422 @@
+.cu-gap {
+  gap: var(--gap);
+}
+
+.cu-gap-0\.5 {
+  gap: var(--canon-space-0_5);
+}
+
+.cu-gap-1 {
+  gap: var(--canon-space-1);
+}
+
+.cu-gap-1\.5 {
+  gap: var(--canon-space-1_5);
+}
+
+.cu-gap-2 {
+  gap: var(--canon-space-2);
+}
+
+.cu-gap-3 {
+  gap: var(--canon-space-3);
+}
+
+.cu-gap-4 {
+  gap: var(--canon-space-4);
+}
+
+.cu-gap-5 {
+  gap: var(--canon-space-5);
+}
+
+.cu-gap-6 {
+  gap: var(--canon-space-6);
+}
+
+.cu-gap-7 {
+  gap: var(--canon-space-7);
+}
+
+.cu-gap-8 {
+  gap: var(--canon-space-8);
+}
+
+.cu-gap-9 {
+  gap: var(--canon-space-9);
+}
+
+.cu-gap-10 {
+  gap: var(--canon-space-10);
+}
+
+.cu-gap-11 {
+  gap: var(--canon-space-11);
+}
+
+.cu-gap-12 {
+  gap: var(--canon-space-12);
+}
+
+.cu-gap-13 {
+  gap: var(--canon-space-13);
+}
+
+.cu-gap-14 {
+  gap: var(--canon-space-14);
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-gap {
+    gap: var(--gap-xs);
+  }
+
+  .xs\:cu-gap-0\.5 {
+    gap: var(--canon-space-0_5);
+  }
+
+  .xs\:cu-gap-1 {
+    gap: var(--canon-space-1);
+  }
+
+  .xs\:cu-gap-1\.5 {
+    gap: var(--canon-space-1_5);
+  }
+
+  .xs\:cu-gap-2 {
+    gap: var(--canon-space-2);
+  }
+
+  .xs\:cu-gap-3 {
+    gap: var(--canon-space-3);
+  }
+
+  .xs\:cu-gap-4 {
+    gap: var(--canon-space-4);
+  }
+
+  .xs\:cu-gap-5 {
+    gap: var(--canon-space-5);
+  }
+
+  .xs\:cu-gap-6 {
+    gap: var(--canon-space-6);
+  }
+
+  .xs\:cu-gap-7 {
+    gap: var(--canon-space-7);
+  }
+
+  .xs\:cu-gap-8 {
+    gap: var(--canon-space-8);
+  }
+
+  .xs\:cu-gap-9 {
+    gap: var(--canon-space-9);
+  }
+
+  .xs\:cu-gap-10 {
+    gap: var(--canon-space-10);
+  }
+
+  .xs\:cu-gap-11 {
+    gap: var(--canon-space-11);
+  }
+
+  .xs\:cu-gap-12 {
+    gap: var(--canon-space-12);
+  }
+
+  .xs\:cu-gap-13 {
+    gap: var(--canon-space-13);
+  }
+
+  .xs\:cu-gap-14 {
+    gap: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-gap {
+    gap: var(--gap-sm);
+  }
+
+  .sm\:cu-gap-0\.5 {
+    gap: var(--canon-space-0_5);
+  }
+
+  .sm\:cu-gap-1 {
+    gap: var(--canon-space-1);
+  }
+
+  .sm\:cu-gap-1\.5 {
+    gap: var(--canon-space-1_5);
+  }
+
+  .sm\:cu-gap-2 {
+    gap: var(--canon-space-2);
+  }
+
+  .sm\:cu-gap-3 {
+    gap: var(--canon-space-3);
+  }
+
+  .sm\:cu-gap-4 {
+    gap: var(--canon-space-4);
+  }
+
+  .sm\:cu-gap-5 {
+    gap: var(--canon-space-5);
+  }
+
+  .sm\:cu-gap-6 {
+    gap: var(--canon-space-6);
+  }
+
+  .sm\:cu-gap-7 {
+    gap: var(--canon-space-7);
+  }
+
+  .sm\:cu-gap-8 {
+    gap: var(--canon-space-8);
+  }
+
+  .sm\:cu-gap-9 {
+    gap: var(--canon-space-9);
+  }
+
+  .sm\:cu-gap-10 {
+    gap: var(--canon-space-10);
+  }
+
+  .sm\:cu-gap-11 {
+    gap: var(--canon-space-11);
+  }
+
+  .sm\:cu-gap-12 {
+    gap: var(--canon-space-12);
+  }
+
+  .sm\:cu-gap-13 {
+    gap: var(--canon-space-13);
+  }
+
+  .sm\:cu-gap-14 {
+    gap: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-gap {
+    gap: var(--gap-md);
+  }
+
+  .md\:cu-gap-0\.5 {
+    gap: var(--canon-space-0_5);
+  }
+
+  .md\:cu-gap-1 {
+    gap: var(--canon-space-1);
+  }
+
+  .md\:cu-gap-1\.5 {
+    gap: var(--canon-space-1_5);
+  }
+
+  .md\:cu-gap-2 {
+    gap: var(--canon-space-2);
+  }
+
+  .md\:cu-gap-3 {
+    gap: var(--canon-space-3);
+  }
+
+  .md\:cu-gap-4 {
+    gap: var(--canon-space-4);
+  }
+
+  .md\:cu-gap-5 {
+    gap: var(--canon-space-5);
+  }
+
+  .md\:cu-gap-6 {
+    gap: var(--canon-space-6);
+  }
+
+  .md\:cu-gap-7 {
+    gap: var(--canon-space-7);
+  }
+
+  .md\:cu-gap-8 {
+    gap: var(--canon-space-8);
+  }
+
+  .md\:cu-gap-9 {
+    gap: var(--canon-space-9);
+  }
+
+  .md\:cu-gap-10 {
+    gap: var(--canon-space-10);
+  }
+
+  .md\:cu-gap-11 {
+    gap: var(--canon-space-11);
+  }
+
+  .md\:cu-gap-12 {
+    gap: var(--canon-space-12);
+  }
+
+  .md\:cu-gap-13 {
+    gap: var(--canon-space-13);
+  }
+
+  .md\:cu-gap-14 {
+    gap: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-gap {
+    gap: var(--gap-lg);
+  }
+
+  .lg\:cu-gap-0\.5 {
+    gap: var(--canon-space-0_5);
+  }
+
+  .lg\:cu-gap-1 {
+    gap: var(--canon-space-1);
+  }
+
+  .lg\:cu-gap-1\.5 {
+    gap: var(--canon-space-1_5);
+  }
+
+  .lg\:cu-gap-2 {
+    gap: var(--canon-space-2);
+  }
+
+  .lg\:cu-gap-3 {
+    gap: var(--canon-space-3);
+  }
+
+  .lg\:cu-gap-4 {
+    gap: var(--canon-space-4);
+  }
+
+  .lg\:cu-gap-5 {
+    gap: var(--canon-space-5);
+  }
+
+  .lg\:cu-gap-6 {
+    gap: var(--canon-space-6);
+  }
+
+  .lg\:cu-gap-7 {
+    gap: var(--canon-space-7);
+  }
+
+  .lg\:cu-gap-8 {
+    gap: var(--canon-space-8);
+  }
+
+  .lg\:cu-gap-9 {
+    gap: var(--canon-space-9);
+  }
+
+  .lg\:cu-gap-10 {
+    gap: var(--canon-space-10);
+  }
+
+  .lg\:cu-gap-11 {
+    gap: var(--canon-space-11);
+  }
+
+  .lg\:cu-gap-12 {
+    gap: var(--canon-space-12);
+  }
+
+  .lg\:cu-gap-13 {
+    gap: var(--canon-space-13);
+  }
+
+  .lg\:cu-gap-14 {
+    gap: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-gap {
+    gap: var(--gap-xl);
+  }
+
+  .xl\:cu-gap-0\.5 {
+    gap: var(--canon-space-0_5);
+  }
+
+  .xl\:cu-gap-1 {
+    gap: var(--canon-space-1);
+  }
+
+  .xl\:cu-gap-1\.5 {
+    gap: var(--canon-space-1_5);
+  }
+
+  .xl\:cu-gap-2 {
+    gap: var(--canon-space-2);
+  }
+
+  .xl\:cu-gap-3 {
+    gap: var(--canon-space-3);
+  }
+
+  .xl\:cu-gap-4 {
+    gap: var(--canon-space-4);
+  }
+
+  .xl\:cu-gap-5 {
+    gap: var(--canon-space-5);
+  }
+
+  .xl\:cu-gap-6 {
+    gap: var(--canon-space-6);
+  }
+
+  .xl\:cu-gap-7 {
+    gap: var(--canon-space-7);
+  }
+
+  .xl\:cu-gap-8 {
+    gap: var(--canon-space-8);
+  }
+
+  .xl\:cu-gap-9 {
+    gap: var(--canon-space-9);
+  }
+
+  .xl\:cu-gap-10 {
+    gap: var(--canon-space-10);
+  }
+
+  .xl\:cu-gap-11 {
+    gap: var(--canon-space-11);
+  }
+
+  .xl\:cu-gap-12 {
+    gap: var(--canon-space-12);
+  }
+
+  .xl\:cu-gap-13 {
+    gap: var(--canon-space-13);
+  }
+
+  .xl\:cu-gap-14 {
+    gap: var(--canon-space-14);
+  }
+}
diff --git a/packages/canon/src/css/utilities/grid.css b/packages/canon/src/css/utilities/grid.css
new file mode 100644
index 0000000000..a0afe55533
--- /dev/null
+++ b/packages/canon/src/css/utilities/grid.css
@@ -0,0 +1,1292 @@
+.cu-columns-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.cu-columns-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.cu-columns-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.cu-columns-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.cu-columns-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.cu-columns-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.cu-columns-7 {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+.cu-columns-8 {
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+}
+
+.cu-columns-9 {
+  grid-template-columns: repeat(9, minmax(0, 1fr));
+}
+
+.cu-columns-10 {
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+}
+
+.cu-columns-11 {
+  grid-template-columns: repeat(11, minmax(0, 1fr));
+}
+
+.cu-columns-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+.cu-columns-auto {
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+}
+
+.cu-col-span-1 {
+  grid-column: span 1 / span 1;
+}
+
+.cu-col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
+.cu-col-span-3 {
+  grid-column: span 3 / span 3;
+}
+
+.cu-col-span-4 {
+  grid-column: span 4 / span 4;
+}
+
+.cu-col-span-5 {
+  grid-column: span 5 / span 5;
+}
+
+.cu-col-span-6 {
+  grid-column: span 6 / span 6;
+}
+
+.cu-col-span-7 {
+  grid-column: span 7 / span 7;
+}
+
+.cu-col-span-8 {
+  grid-column: span 8 / span 8;
+}
+
+.cu-col-span-9 {
+  grid-column: span 9 / span 9;
+}
+
+.cu-col-span-10 {
+  grid-column: span 10 / span 10;
+}
+
+.cu-col-span-11 {
+  grid-column: span 11 / span 11;
+}
+
+.cu-col-span-12 {
+  grid-column: span 12 / span 12;
+}
+
+.cu-col-span-auto {
+  grid-column: span auto / span auto;
+}
+
+.cu-col-start-1 {
+  grid-column-start: 1;
+}
+
+.cu-col-start-2 {
+  grid-column-start: 2;
+}
+
+.cu-col-start-3 {
+  grid-column-start: 3;
+}
+
+.cu-col-start-4 {
+  grid-column-start: 4;
+}
+
+.cu-col-start-5 {
+  grid-column-start: 5;
+}
+
+.cu-col-start-6 {
+  grid-column-start: 6;
+}
+
+.cu-col-start-7 {
+  grid-column-start: 7;
+}
+
+.cu-col-start-8 {
+  grid-column-start: 8;
+}
+
+.cu-col-start-9 {
+  grid-column-start: 9;
+}
+
+.cu-col-start-10 {
+  grid-column-start: 10;
+}
+
+.cu-col-start-11 {
+  grid-column-start: 11;
+}
+
+.cu-col-start-12 {
+  grid-column-start: 12;
+}
+
+.cu-col-start-13 {
+  grid-column-start: 13;
+}
+
+.cu-col-start-auto {
+  grid-column-start: auto;
+}
+
+.cu-col-end-1 {
+  grid-column-end: 1;
+}
+
+.cu-col-end-2 {
+  grid-column-end: 2;
+}
+
+.cu-col-end-3 {
+  grid-column-end: 3;
+}
+
+.cu-col-end-4 {
+  grid-column-end: 4;
+}
+
+.cu-col-end-5 {
+  grid-column-end: 5;
+}
+
+.cu-col-end-6 {
+  grid-column-end: 6;
+}
+
+.cu-col-end-7 {
+  grid-column-end: 7;
+}
+
+.cu-col-end-8 {
+  grid-column-end: 8;
+}
+
+.cu-col-end-9 {
+  grid-column-end: 9;
+}
+
+.cu-col-end-10 {
+  grid-column-end: 10;
+}
+
+.cu-col-end-11 {
+  grid-column-end: 11;
+}
+
+.cu-col-end-12 {
+  grid-column-end: 12;
+}
+
+.cu-col-end-13 {
+  grid-column-end: 13;
+}
+
+.cu-col-end-auto {
+  grid-column-end: auto;
+}
+
+.cu-row-span-1 {
+  grid-row: span 1 / span 1;
+}
+
+.cu-row-span-2 {
+  grid-row: span 2 / span 2;
+}
+
+.cu-row-span-3 {
+  grid-row: span 3 / span 3;
+}
+
+.cu-row-span-4 {
+  grid-row: span 4 / span 4;
+}
+
+.cu-row-span-5 {
+  grid-row: span 5 / span 5;
+}
+
+.cu-row-span-6 {
+  grid-row: span 6 / span 6;
+}
+
+.cu-row-span-7 {
+  grid-row: span 7 / span 7;
+}
+
+.cu-row-span-8 {
+  grid-row: span 8 / span 8;
+}
+
+.cu-row-span-9 {
+  grid-row: span 9 / span 9;
+}
+
+.cu-row-span-10 {
+  grid-row: span 10 / span 10;
+}
+
+.cu-row-span-11 {
+  grid-row: span 11 / span 11;
+}
+
+.cu-row-span-12 {
+  grid-row: span 12 / span 12;
+}
+
+.cu-row-span-auto {
+  grid-row: span auto / span auto;
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-columns-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-auto {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
+  .xs\:cu-col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .xs\:cu-col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .xs\:cu-col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .xs\:cu-col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .xs\:cu-col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .xs\:cu-col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .xs\:cu-col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+  .xs\:cu-col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+  .xs\:cu-col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+  .xs\:cu-col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+  .xs\:cu-col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+  .xs\:cu-col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+  .xs\:cu-col-span-auto {
+    grid-column: span auto / span auto;
+  }
+  .xs\:cu-col-start-1 {
+    grid-column-start: 1;
+  }
+  .xs\:cu-col-start-2 {
+    grid-column-start: 2;
+  }
+  .xs\:cu-col-start-3 {
+    grid-column-start: 3;
+  }
+  .xs\:cu-col-start-4 {
+    grid-column-start: 4;
+  }
+  .xs\:cu-col-start-5 {
+    grid-column-start: 5;
+  }
+  .xs\:cu-col-start-6 {
+    grid-column-start: 6;
+  }
+  .xs\:cu-col-start-7 {
+    grid-column-start: 7;
+  }
+  .xs\:cu-col-start-8 {
+    grid-column-start: 8;
+  }
+  .xs\:cu-col-start-9 {
+    grid-column-start: 9;
+  }
+  .xs\:cu-col-start-10 {
+    grid-column-start: 10;
+  }
+  .xs\:cu-col-start-11 {
+    grid-column-start: 11;
+  }
+  .xs\:cu-col-start-12 {
+    grid-column-start: 12;
+  }
+  .xs\:cu-col-start-13 {
+    grid-column-start: 13;
+  }
+  .xs\:cu-col-start-auto {
+    grid-column-start: auto;
+  }
+  .xs\:cu-col-end-1 {
+    grid-column-end: 1;
+  }
+  .xs\:cu-col-end-2 {
+    grid-column-end: 2;
+  }
+  .xs\:cu-col-end-3 {
+    grid-column-end: 3;
+  }
+  .xs\:cu-col-end-4 {
+    grid-column-end: 4;
+  }
+  .xs\:cu-col-end-5 {
+    grid-column-end: 5;
+  }
+  .xs\:cu-col-end-6 {
+    grid-column-end: 6;
+  }
+  .xs\:cu-col-end-7 {
+    grid-column-end: 7;
+  }
+  .xs\:cu-col-end-8 {
+    grid-column-end: 8;
+  }
+  .xs\:cu-col-end-9 {
+    grid-column-end: 9;
+  }
+  .xs\:cu-col-end-10 {
+    grid-column-end: 10;
+  }
+  .xs\:cu-col-end-11 {
+    grid-column-end: 11;
+  }
+  .xs\:cu-col-end-12 {
+    grid-column-end: 12;
+  }
+  .xs\:cu-col-end-13 {
+    grid-column-end: 13;
+  }
+  .xs\:cu-col-end-auto {
+    grid-column-end: auto;
+  }
+  .xs\:cu-row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+  .xs\:cu-row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+  .xs\:cu-row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+  .xs\:cu-row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+  .xs\:cu-row-span-5 {
+    grid-row: span 5 / span 5;
+  }
+  .xs\:cu-row-span-6 {
+    grid-row: span 6 / span 6;
+  }
+  .xs\:cu-row-span-7 {
+    grid-row: span 7 / span 7;
+  }
+  .xs\:cu-row-span-8 {
+    grid-row: span 8 / span 8;
+  }
+  .xs\:cu-row-span-9 {
+    grid-row: span 9 / span 9;
+  }
+  .xs\:cu-row-span-10 {
+    grid-row: span 10 / span 10;
+  }
+  .xs\:cu-row-span-11 {
+    grid-row: span 11 / span 11;
+  }
+  .xs\:cu-row-span-12 {
+    grid-row: span 12 / span 12;
+  }
+  .xs\:cu-row-span-auto {
+    grid-row: span auto / span auto;
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-columns-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-auto {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
+  .sm\:cu-col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .sm\:cu-col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .sm\:cu-col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .sm\:cu-col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .sm\:cu-col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .sm\:cu-col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .sm\:cu-col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+  .sm\:cu-col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+  .sm\:cu-col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+  .sm\:cu-col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+  .sm\:cu-col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+  .sm\:cu-col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+  .sm\:cu-col-span-auto {
+    grid-column: span auto / span auto;
+  }
+  .sm\:cu-col-start-1 {
+    grid-column-start: 1;
+  }
+  .sm\:cu-col-start-2 {
+    grid-column-start: 2;
+  }
+  .sm\:cu-col-start-3 {
+    grid-column-start: 3;
+  }
+  .sm\:cu-col-start-4 {
+    grid-column-start: 4;
+  }
+  .sm\:cu-col-start-5 {
+    grid-column-start: 5;
+  }
+  .sm\:cu-col-start-6 {
+    grid-column-start: 6;
+  }
+  .sm\:cu-col-start-7 {
+    grid-column-start: 7;
+  }
+  .sm\:cu-col-start-8 {
+    grid-column-start: 8;
+  }
+  .sm\:cu-col-start-9 {
+    grid-column-start: 9;
+  }
+  .sm\:cu-col-start-10 {
+    grid-column-start: 10;
+  }
+  .sm\:cu-col-start-11 {
+    grid-column-start: 11;
+  }
+  .sm\:cu-col-start-12 {
+    grid-column-start: 12;
+  }
+  .sm\:cu-col-start-13 {
+    grid-column-start: 13;
+  }
+  .sm\:cu-col-start-auto {
+    grid-column-start: auto;
+  }
+  .sm\:cu-col-end-1 {
+    grid-column-end: 1;
+  }
+  .sm\:cu-col-end-2 {
+    grid-column-end: 2;
+  }
+  .sm\:cu-col-end-3 {
+    grid-column-end: 3;
+  }
+  .sm\:cu-col-end-4 {
+    grid-column-end: 4;
+  }
+  .sm\:cu-col-end-5 {
+    grid-column-end: 5;
+  }
+  .sm\:cu-col-end-6 {
+    grid-column-end: 6;
+  }
+  .sm\:cu-col-end-7 {
+    grid-column-end: 7;
+  }
+  .sm\:cu-col-end-8 {
+    grid-column-end: 8;
+  }
+  .sm\:cu-col-end-9 {
+    grid-column-end: 9;
+  }
+  .sm\:cu-col-end-10 {
+    grid-column-end: 10;
+  }
+  .sm\:cu-col-end-11 {
+    grid-column-end: 11;
+  }
+  .sm\:cu-col-end-12 {
+    grid-column-end: 12;
+  }
+  .sm\:cu-col-end-13 {
+    grid-column-end: 13;
+  }
+  .sm\:cu-col-end-auto {
+    grid-column-end: auto;
+  }
+  .sm\:cu-row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+  .sm\:cu-row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+  .sm\:cu-row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+  .sm\:cu-row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+  .sm\:cu-row-span-5 {
+    grid-row: span 5 / span 5;
+  }
+  .sm\:cu-row-span-6 {
+    grid-row: span 6 / span 6;
+  }
+  .sm\:cu-row-span-7 {
+    grid-row: span 7 / span 7;
+  }
+  .sm\:cu-row-span-8 {
+    grid-row: span 8 / span 8;
+  }
+  .sm\:cu-row-span-9 {
+    grid-row: span 9 / span 9;
+  }
+  .sm\:cu-row-span-10 {
+    grid-row: span 10 / span 10;
+  }
+  .sm\:cu-row-span-11 {
+    grid-row: span 11 / span 11;
+  }
+  .sm\:cu-row-span-12 {
+    grid-row: span 12 / span 12;
+  }
+  .sm\:cu-row-span-auto {
+    grid-row: span auto / span auto;
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-columns-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .md\:cu-columns-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .md\:cu-columns-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .md\:cu-columns-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .md\:cu-columns-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .md\:cu-columns-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .md\:cu-columns-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .md\:cu-columns-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .md\:cu-columns-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .md\:cu-columns-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .md\:cu-columns-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .md\:cu-columns-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .md\:cu-columns-auto {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
+  .md\:cu-col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .md\:cu-col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .md\:cu-col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .md\:cu-col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .md\:cu-col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .md\:cu-col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .md\:cu-col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+  .md\:cu-col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+  .md\:cu-col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+  .md\:cu-col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+  .md\:cu-col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+  .md\:cu-col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+  .md\:cu-col-span-auto {
+    grid-column: span auto / span auto;
+  }
+  .md\:cu-col-start-1 {
+    grid-column-start: 1;
+  }
+  .md\:cu-col-start-2 {
+    grid-column-start: 2;
+  }
+  .md\:cu-col-start-3 {
+    grid-column-start: 3;
+  }
+  .md\:cu-col-start-4 {
+    grid-column-start: 4;
+  }
+  .md\:cu-col-start-5 {
+    grid-column-start: 5;
+  }
+  .md\:cu-col-start-6 {
+    grid-column-start: 6;
+  }
+  .md\:cu-col-start-7 {
+    grid-column-start: 7;
+  }
+  .md\:cu-col-start-8 {
+    grid-column-start: 8;
+  }
+  .md\:cu-col-start-9 {
+    grid-column-start: 9;
+  }
+  .md\:cu-col-start-10 {
+    grid-column-start: 10;
+  }
+  .md\:cu-col-start-11 {
+    grid-column-start: 11;
+  }
+  .md\:cu-col-start-12 {
+    grid-column-start: 12;
+  }
+  .md\:cu-col-start-13 {
+    grid-column-start: 13;
+  }
+  .md\:cu-col-start-auto {
+    grid-column-start: auto;
+  }
+  .md\:cu-col-end-1 {
+    grid-column-end: 1;
+  }
+  .md\:cu-col-end-2 {
+    grid-column-end: 2;
+  }
+  .md\:cu-col-end-3 {
+    grid-column-end: 3;
+  }
+  .md\:cu-col-end-4 {
+    grid-column-end: 4;
+  }
+  .md\:cu-col-end-5 {
+    grid-column-end: 5;
+  }
+  .md\:cu-col-end-6 {
+    grid-column-end: 6;
+  }
+  .md\:cu-col-end-7 {
+    grid-column-end: 7;
+  }
+  .md\:cu-col-end-8 {
+    grid-column-end: 8;
+  }
+  .md\:cu-col-end-9 {
+    grid-column-end: 9;
+  }
+  .md\:cu-col-end-10 {
+    grid-column-end: 10;
+  }
+  .md\:cu-col-end-11 {
+    grid-column-end: 11;
+  }
+  .md\:cu-col-end-12 {
+    grid-column-end: 12;
+  }
+  .md\:cu-col-end-13 {
+    grid-column-end: 13;
+  }
+  .md\:cu-col-end-auto {
+    grid-column-end: auto;
+  }
+  .md\:cu-row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+  .md\:cu-row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+  .md\:cu-row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+  .md\:cu-row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+  .md\:cu-row-span-5 {
+    grid-row: span 5 / span 5;
+  }
+  .md\:cu-row-span-6 {
+    grid-row: span 6 / span 6;
+  }
+  .md\:cu-row-span-7 {
+    grid-row: span 7 / span 7;
+  }
+  .md\:cu-row-span-8 {
+    grid-row: span 8 / span 8;
+  }
+  .md\:cu-row-span-9 {
+    grid-row: span 9 / span 9;
+  }
+  .md\:cu-row-span-10 {
+    grid-row: span 10 / span 10;
+  }
+  .md\:cu-row-span-11 {
+    grid-row: span 11 / span 11;
+  }
+  .md\:cu-row-span-12 {
+    grid-row: span 12 / span 12;
+  }
+  .md\:cu-row-span-auto {
+    grid-row: span auto / span auto;
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-columns-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-auto {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
+  .lg\:cu-col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .lg\:cu-col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .lg\:cu-col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .lg\:cu-col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .lg\:cu-col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .lg\:cu-col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .lg\:cu-col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+  .lg\:cu-col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+  .lg\:cu-col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+  .lg\:cu-col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+  .lg\:cu-col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+  .lg\:cu-col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+  .lg\:cu-col-span-auto {
+    grid-column: span auto / span auto;
+  }
+  .lg\:cu-col-start-1 {
+    grid-column-start: 1;
+  }
+  .lg\:cu-col-start-2 {
+    grid-column-start: 2;
+  }
+  .lg\:cu-col-start-3 {
+    grid-column-start: 3;
+  }
+  .lg\:cu-col-start-4 {
+    grid-column-start: 4;
+  }
+  .lg\:cu-col-start-5 {
+    grid-column-start: 5;
+  }
+  .lg\:cu-col-start-6 {
+    grid-column-start: 6;
+  }
+  .lg\:cu-col-start-7 {
+    grid-column-start: 7;
+  }
+  .lg\:cu-col-start-8 {
+    grid-column-start: 8;
+  }
+  .lg\:cu-col-start-9 {
+    grid-column-start: 9;
+  }
+  .lg\:cu-col-start-10 {
+    grid-column-start: 10;
+  }
+  .lg\:cu-col-start-11 {
+    grid-column-start: 11;
+  }
+  .lg\:cu-col-start-12 {
+    grid-column-start: 12;
+  }
+  .lg\:cu-col-start-13 {
+    grid-column-start: 13;
+  }
+  .lg\:cu-col-start-auto {
+    grid-column-start: auto;
+  }
+  .lg\:cu-col-end-1 {
+    grid-column-end: 1;
+  }
+  .lg\:cu-col-end-2 {
+    grid-column-end: 2;
+  }
+  .lg\:cu-col-end-3 {
+    grid-column-end: 3;
+  }
+  .lg\:cu-col-end-4 {
+    grid-column-end: 4;
+  }
+  .lg\:cu-col-end-5 {
+    grid-column-end: 5;
+  }
+  .lg\:cu-col-end-6 {
+    grid-column-end: 6;
+  }
+  .lg\:cu-col-end-7 {
+    grid-column-end: 7;
+  }
+  .lg\:cu-col-end-8 {
+    grid-column-end: 8;
+  }
+  .lg\:cu-col-end-9 {
+    grid-column-end: 9;
+  }
+  .lg\:cu-col-end-10 {
+    grid-column-end: 10;
+  }
+  .lg\:cu-col-end-11 {
+    grid-column-end: 11;
+  }
+  .lg\:cu-col-end-12 {
+    grid-column-end: 12;
+  }
+  .lg\:cu-col-end-13 {
+    grid-column-end: 13;
+  }
+  .lg\:cu-col-end-auto {
+    grid-column-end: auto;
+  }
+  .lg\:cu-row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+  .lg\:cu-row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+  .lg\:cu-row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+  .lg\:cu-row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+  .lg\:cu-row-span-5 {
+    grid-row: span 5 / span 5;
+  }
+  .lg\:cu-row-span-6 {
+    grid-row: span 6 / span 6;
+  }
+  .lg\:cu-row-span-7 {
+    grid-row: span 7 / span 7;
+  }
+  .lg\:cu-row-span-8 {
+    grid-row: span 8 / span 8;
+  }
+  .lg\:cu-row-span-9 {
+    grid-row: span 9 / span 9;
+  }
+  .lg\:cu-row-span-10 {
+    grid-row: span 10 / span 10;
+  }
+  .lg\:cu-row-span-11 {
+    grid-row: span 11 / span 11;
+  }
+  .lg\:cu-row-span-12 {
+    grid-row: span 12 / span 12;
+  }
+  .lg\:cu-row-span-auto {
+    grid-row: span auto / span auto;
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-columns-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-auto {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
+  .xl\:cu-col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .xl\:cu-col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .xl\:cu-col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .xl\:cu-col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .xl\:cu-col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .xl\:cu-col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .xl\:cu-col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+  .xl\:cu-col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+  .xl\:cu-col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+  .xl\:cu-col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+  .xl\:cu-col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+  .xl\:cu-col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+  .xl\:cu-col-span-auto {
+    grid-column: span auto / span auto;
+  }
+  .xl\:cu-col-start-1 {
+    grid-column-start: 1;
+  }
+  .xl\:cu-col-start-2 {
+    grid-column-start: 2;
+  }
+  .xl\:cu-col-start-3 {
+    grid-column-start: 3;
+  }
+  .xl\:cu-col-start-4 {
+    grid-column-start: 4;
+  }
+  .xl\:cu-col-start-5 {
+    grid-column-start: 5;
+  }
+  .xl\:cu-col-start-6 {
+    grid-column-start: 6;
+  }
+  .xl\:cu-col-start-7 {
+    grid-column-start: 7;
+  }
+  .xl\:cu-col-start-8 {
+    grid-column-start: 8;
+  }
+  .xl\:cu-col-start-9 {
+    grid-column-start: 9;
+  }
+  .xl\:cu-col-start-10 {
+    grid-column-start: 10;
+  }
+  .xl\:cu-col-start-11 {
+    grid-column-start: 11;
+  }
+  .xl\:cu-col-start-12 {
+    grid-column-start: 12;
+  }
+  .xl\:cu-col-start-13 {
+    grid-column-start: 13;
+  }
+  .xl\:cu-col-start-auto {
+    grid-column-start: auto;
+  }
+  .xl\:cu-col-end-1 {
+    grid-column-end: 1;
+  }
+  .xl\:cu-col-end-2 {
+    grid-column-end: 2;
+  }
+  .xl\:cu-col-end-3 {
+    grid-column-end: 3;
+  }
+  .xl\:cu-col-end-4 {
+    grid-column-end: 4;
+  }
+  .xl\:cu-col-end-5 {
+    grid-column-end: 5;
+  }
+  .xl\:cu-col-end-6 {
+    grid-column-end: 6;
+  }
+  .xl\:cu-col-end-7 {
+    grid-column-end: 7;
+  }
+  .xl\:cu-col-end-8 {
+    grid-column-end: 8;
+  }
+  .xl\:cu-col-end-9 {
+    grid-column-end: 9;
+  }
+  .xl\:cu-col-end-10 {
+    grid-column-end: 10;
+  }
+  .xl\:cu-col-end-11 {
+    grid-column-end: 11;
+  }
+  .xl\:cu-col-end-12 {
+    grid-column-end: 12;
+  }
+  .xl\:cu-col-end-13 {
+    grid-column-end: 13;
+  }
+  .xl\:cu-col-end-auto {
+    grid-column-end: auto;
+  }
+  .xl\:cu-row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+  .xl\:cu-row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+  .xl\:cu-row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+  .xl\:cu-row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+  .xl\:cu-row-span-5 {
+    grid-row: span 5 / span 5;
+  }
+  .xl\:cu-row-span-6 {
+    grid-row: span 6 / span 6;
+  }
+  .xl\:cu-row-span-7 {
+    grid-row: span 7 / span 7;
+  }
+  .xl\:cu-row-span-8 {
+    grid-row: span 8 / span 8;
+  }
+  .xl\:cu-row-span-9 {
+    grid-row: span 9 / span 9;
+  }
+  .xl\:cu-row-span-10 {
+    grid-row: span 10 / span 10;
+  }
+  .xl\:cu-row-span-11 {
+    grid-row: span 11 / span 11;
+  }
+  .xl\:cu-row-span-12 {
+    grid-row: span 12 / span 12;
+  }
+  .xl\:cu-row-span-auto {
+    grid-row: span auto / span auto;
+  }
+}
diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css
index 297aff1d98..179b4a83b2 100644
--- a/packages/canon/src/css/utilities/lg.css
+++ b/packages/canon/src/css/utilities/lg.css
@@ -49,170 +49,6 @@
       border-style: solid;
     }
 
-    .cu-lg-col-end-1 {
-      grid-column-end: 1;
-    }
-
-    .cu-lg-col-end-10 {
-      grid-column-end: 10;
-    }
-
-    .cu-lg-col-end-11 {
-      grid-column-end: 11;
-    }
-
-    .cu-lg-col-end-12 {
-      grid-column-end: 12;
-    }
-
-    .cu-lg-col-end-13 {
-      grid-column-end: 13;
-    }
-
-    .cu-lg-col-end-2 {
-      grid-column-end: 2;
-    }
-
-    .cu-lg-col-end-3 {
-      grid-column-end: 3;
-    }
-
-    .cu-lg-col-end-4 {
-      grid-column-end: 4;
-    }
-
-    .cu-lg-col-end-5 {
-      grid-column-end: 5;
-    }
-
-    .cu-lg-col-end-6 {
-      grid-column-end: 6;
-    }
-
-    .cu-lg-col-end-7 {
-      grid-column-end: 7;
-    }
-
-    .cu-lg-col-end-8 {
-      grid-column-end: 8;
-    }
-
-    .cu-lg-col-end-9 {
-      grid-column-end: 9;
-    }
-
-    .cu-lg-col-end-auto {
-      grid-column-end: auto;
-    }
-
-    .cu-lg-col-span-1 {
-      grid-column: span 1 / span 1;
-    }
-
-    .cu-lg-col-span-10 {
-      grid-column: span 10 / span 10;
-    }
-
-    .cu-lg-col-span-11 {
-      grid-column: span 11 / span 11;
-    }
-
-    .cu-lg-col-span-12 {
-      grid-column: span 12 / span 12;
-    }
-
-    .cu-lg-col-span-2 {
-      grid-column: span 2 / span 2;
-    }
-
-    .cu-lg-col-span-3 {
-      grid-column: span 3 / span 3;
-    }
-
-    .cu-lg-col-span-4 {
-      grid-column: span 4 / span 4;
-    }
-
-    .cu-lg-col-span-5 {
-      grid-column: span 5 / span 5;
-    }
-
-    .cu-lg-col-span-6 {
-      grid-column: span 6 / span 6;
-    }
-
-    .cu-lg-col-span-7 {
-      grid-column: span 7 / span 7;
-    }
-
-    .cu-lg-col-span-8 {
-      grid-column: span 8 / span 8;
-    }
-
-    .cu-lg-col-span-9 {
-      grid-column: span 9 / span 9;
-    }
-
-    .cu-lg-col-span-auto {
-      grid-column: span auto / span auto;
-    }
-
-    .cu-lg-col-start-1 {
-      grid-column-start: 1;
-    }
-
-    .cu-lg-col-start-10 {
-      grid-column-start: 10;
-    }
-
-    .cu-lg-col-start-11 {
-      grid-column-start: 11;
-    }
-
-    .cu-lg-col-start-12 {
-      grid-column-start: 12;
-    }
-
-    .cu-lg-col-start-13 {
-      grid-column-start: 13;
-    }
-
-    .cu-lg-col-start-2 {
-      grid-column-start: 2;
-    }
-
-    .cu-lg-col-start-3 {
-      grid-column-start: 3;
-    }
-
-    .cu-lg-col-start-4 {
-      grid-column-start: 4;
-    }
-
-    .cu-lg-col-start-5 {
-      grid-column-start: 5;
-    }
-
-    .cu-lg-col-start-6 {
-      grid-column-start: 6;
-    }
-
-    .cu-lg-col-start-7 {
-      grid-column-start: 7;
-    }
-
-    .cu-lg-col-start-8 {
-      grid-column-start: 8;
-    }
-
-    .cu-lg-col-start-9 {
-      grid-column-start: 9;
-    }
-
-    .cu-lg-col-start-auto {
-      grid-column-start: auto;
-    }
-
     .cu-lg-flex {
       display: flex;
     }
@@ -237,90 +73,6 @@
       flex-wrap: wrap-reverse;
     }
 
-    .cu-lg-gap-2xl {
-      gap: var(--canon-space-12);
-    }
-
-    .cu-lg-gap-lg {
-      gap: var(--canon-space-8);
-    }
-
-    .cu-lg-gap-md {
-      gap: var(--canon-space-6);
-    }
-
-    .cu-lg-gap-none {
-      gap: 0;
-    }
-
-    .cu-lg-gap-sm {
-      gap: var(--canon-space-4);
-    }
-
-    .cu-lg-gap-xl {
-      gap: var(--canon-space-10);
-    }
-
-    .cu-lg-gap-xs {
-      gap: var(--canon-space-3);
-    }
-
-    .cu-lg-grid {
-      display: grid;
-    }
-
-    .cu-lg-grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-auto {
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
-
     .cu-lg-hidden {
       display: none;
     }
@@ -405,58 +157,6 @@
       border-radius: var(--canon-radius-2);
     }
 
-    .cu-lg-row-span-1 {
-      grid-row: span 1 / span 1;
-    }
-
-    .cu-lg-row-span-10 {
-      grid-row: span 10 / span 10;
-    }
-
-    .cu-lg-row-span-11 {
-      grid-row: span 11 / span 11;
-    }
-
-    .cu-lg-row-span-12 {
-      grid-row: span 12 / span 12;
-    }
-
-    .cu-lg-row-span-2 {
-      grid-row: span 2 / span 2;
-    }
-
-    .cu-lg-row-span-3 {
-      grid-row: span 3 / span 3;
-    }
-
-    .cu-lg-row-span-4 {
-      grid-row: span 4 / span 4;
-    }
-
-    .cu-lg-row-span-5 {
-      grid-row: span 5 / span 5;
-    }
-
-    .cu-lg-row-span-6 {
-      grid-row: span 6 / span 6;
-    }
-
-    .cu-lg-row-span-7 {
-      grid-row: span 7 / span 7;
-    }
-
-    .cu-lg-row-span-8 {
-      grid-row: span 8 / span 8;
-    }
-
-    .cu-lg-row-span-9 {
-      grid-row: span 9 / span 9;
-    }
-
-    .cu-lg-row-span-auto {
-      grid-row: span auto / span auto;
-    }
-
     .cu-lg-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css
index 981530f0e3..2cf50dc137 100644
--- a/packages/canon/src/css/utilities/md.css
+++ b/packages/canon/src/css/utilities/md.css
@@ -49,170 +49,6 @@
       border-style: solid;
     }
 
-    .cu-md-col-end-1 {
-      grid-column-end: 1;
-    }
-
-    .cu-md-col-end-10 {
-      grid-column-end: 10;
-    }
-
-    .cu-md-col-end-11 {
-      grid-column-end: 11;
-    }
-
-    .cu-md-col-end-12 {
-      grid-column-end: 12;
-    }
-
-    .cu-md-col-end-13 {
-      grid-column-end: 13;
-    }
-
-    .cu-md-col-end-2 {
-      grid-column-end: 2;
-    }
-
-    .cu-md-col-end-3 {
-      grid-column-end: 3;
-    }
-
-    .cu-md-col-end-4 {
-      grid-column-end: 4;
-    }
-
-    .cu-md-col-end-5 {
-      grid-column-end: 5;
-    }
-
-    .cu-md-col-end-6 {
-      grid-column-end: 6;
-    }
-
-    .cu-md-col-end-7 {
-      grid-column-end: 7;
-    }
-
-    .cu-md-col-end-8 {
-      grid-column-end: 8;
-    }
-
-    .cu-md-col-end-9 {
-      grid-column-end: 9;
-    }
-
-    .cu-md-col-end-auto {
-      grid-column-end: auto;
-    }
-
-    .cu-md-col-span-1 {
-      grid-column: span 1 / span 1;
-    }
-
-    .cu-md-col-span-10 {
-      grid-column: span 10 / span 10;
-    }
-
-    .cu-md-col-span-11 {
-      grid-column: span 11 / span 11;
-    }
-
-    .cu-md-col-span-12 {
-      grid-column: span 12 / span 12;
-    }
-
-    .cu-md-col-span-2 {
-      grid-column: span 2 / span 2;
-    }
-
-    .cu-md-col-span-3 {
-      grid-column: span 3 / span 3;
-    }
-
-    .cu-md-col-span-4 {
-      grid-column: span 4 / span 4;
-    }
-
-    .cu-md-col-span-5 {
-      grid-column: span 5 / span 5;
-    }
-
-    .cu-md-col-span-6 {
-      grid-column: span 6 / span 6;
-    }
-
-    .cu-md-col-span-7 {
-      grid-column: span 7 / span 7;
-    }
-
-    .cu-md-col-span-8 {
-      grid-column: span 8 / span 8;
-    }
-
-    .cu-md-col-span-9 {
-      grid-column: span 9 / span 9;
-    }
-
-    .cu-md-col-span-auto {
-      grid-column: span auto / span auto;
-    }
-
-    .cu-md-col-start-1 {
-      grid-column-start: 1;
-    }
-
-    .cu-md-col-start-10 {
-      grid-column-start: 10;
-    }
-
-    .cu-md-col-start-11 {
-      grid-column-start: 11;
-    }
-
-    .cu-md-col-start-12 {
-      grid-column-start: 12;
-    }
-
-    .cu-md-col-start-13 {
-      grid-column-start: 13;
-    }
-
-    .cu-md-col-start-2 {
-      grid-column-start: 2;
-    }
-
-    .cu-md-col-start-3 {
-      grid-column-start: 3;
-    }
-
-    .cu-md-col-start-4 {
-      grid-column-start: 4;
-    }
-
-    .cu-md-col-start-5 {
-      grid-column-start: 5;
-    }
-
-    .cu-md-col-start-6 {
-      grid-column-start: 6;
-    }
-
-    .cu-md-col-start-7 {
-      grid-column-start: 7;
-    }
-
-    .cu-md-col-start-8 {
-      grid-column-start: 8;
-    }
-
-    .cu-md-col-start-9 {
-      grid-column-start: 9;
-    }
-
-    .cu-md-col-start-auto {
-      grid-column-start: auto;
-    }
-
     .cu-md-flex {
       display: flex;
     }
@@ -237,90 +73,6 @@
       flex-wrap: wrap-reverse;
     }
 
-    .cu-md-gap-2xl {
-      gap: var(--canon-space-12);
-    }
-
-    .cu-md-gap-lg {
-      gap: var(--canon-space-8);
-    }
-
-    .cu-md-gap-md {
-      gap: var(--canon-space-6);
-    }
-
-    .cu-md-gap-none {
-      gap: 0;
-    }
-
-    .cu-md-gap-sm {
-      gap: var(--canon-space-4);
-    }
-
-    .cu-md-gap-xl {
-      gap: var(--canon-space-10);
-    }
-
-    .cu-md-gap-xs {
-      gap: var(--canon-space-3);
-    }
-
-    .cu-md-grid {
-      display: grid;
-    }
-
-    .cu-md-grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-auto {
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
-
     .cu-md-hidden {
       display: none;
     }
@@ -405,58 +157,6 @@
       border-radius: var(--canon-radius-2);
     }
 
-    .cu-md-row-span-1 {
-      grid-row: span 1 / span 1;
-    }
-
-    .cu-md-row-span-10 {
-      grid-row: span 10 / span 10;
-    }
-
-    .cu-md-row-span-11 {
-      grid-row: span 11 / span 11;
-    }
-
-    .cu-md-row-span-12 {
-      grid-row: span 12 / span 12;
-    }
-
-    .cu-md-row-span-2 {
-      grid-row: span 2 / span 2;
-    }
-
-    .cu-md-row-span-3 {
-      grid-row: span 3 / span 3;
-    }
-
-    .cu-md-row-span-4 {
-      grid-row: span 4 / span 4;
-    }
-
-    .cu-md-row-span-5 {
-      grid-row: span 5 / span 5;
-    }
-
-    .cu-md-row-span-6 {
-      grid-row: span 6 / span 6;
-    }
-
-    .cu-md-row-span-7 {
-      grid-row: span 7 / span 7;
-    }
-
-    .cu-md-row-span-8 {
-      grid-row: span 8 / span 8;
-    }
-
-    .cu-md-row-span-9 {
-      grid-row: span 9 / span 9;
-    }
-
-    .cu-md-row-span-auto {
-      grid-row: span auto / span auto;
-    }
-
     .cu-md-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css
index 856cc59440..2a216a950e 100644
--- a/packages/canon/src/css/utilities/sm.css
+++ b/packages/canon/src/css/utilities/sm.css
@@ -49,170 +49,6 @@
       border-style: solid;
     }
 
-    .cu-sm-col-end-1 {
-      grid-column-end: 1;
-    }
-
-    .cu-sm-col-end-10 {
-      grid-column-end: 10;
-    }
-
-    .cu-sm-col-end-11 {
-      grid-column-end: 11;
-    }
-
-    .cu-sm-col-end-12 {
-      grid-column-end: 12;
-    }
-
-    .cu-sm-col-end-13 {
-      grid-column-end: 13;
-    }
-
-    .cu-sm-col-end-2 {
-      grid-column-end: 2;
-    }
-
-    .cu-sm-col-end-3 {
-      grid-column-end: 3;
-    }
-
-    .cu-sm-col-end-4 {
-      grid-column-end: 4;
-    }
-
-    .cu-sm-col-end-5 {
-      grid-column-end: 5;
-    }
-
-    .cu-sm-col-end-6 {
-      grid-column-end: 6;
-    }
-
-    .cu-sm-col-end-7 {
-      grid-column-end: 7;
-    }
-
-    .cu-sm-col-end-8 {
-      grid-column-end: 8;
-    }
-
-    .cu-sm-col-end-9 {
-      grid-column-end: 9;
-    }
-
-    .cu-sm-col-end-auto {
-      grid-column-end: auto;
-    }
-
-    .cu-sm-col-span-1 {
-      grid-column: span 1 / span 1;
-    }
-
-    .cu-sm-col-span-10 {
-      grid-column: span 10 / span 10;
-    }
-
-    .cu-sm-col-span-11 {
-      grid-column: span 11 / span 11;
-    }
-
-    .cu-sm-col-span-12 {
-      grid-column: span 12 / span 12;
-    }
-
-    .cu-sm-col-span-2 {
-      grid-column: span 2 / span 2;
-    }
-
-    .cu-sm-col-span-3 {
-      grid-column: span 3 / span 3;
-    }
-
-    .cu-sm-col-span-4 {
-      grid-column: span 4 / span 4;
-    }
-
-    .cu-sm-col-span-5 {
-      grid-column: span 5 / span 5;
-    }
-
-    .cu-sm-col-span-6 {
-      grid-column: span 6 / span 6;
-    }
-
-    .cu-sm-col-span-7 {
-      grid-column: span 7 / span 7;
-    }
-
-    .cu-sm-col-span-8 {
-      grid-column: span 8 / span 8;
-    }
-
-    .cu-sm-col-span-9 {
-      grid-column: span 9 / span 9;
-    }
-
-    .cu-sm-col-span-auto {
-      grid-column: span auto / span auto;
-    }
-
-    .cu-sm-col-start-1 {
-      grid-column-start: 1;
-    }
-
-    .cu-sm-col-start-10 {
-      grid-column-start: 10;
-    }
-
-    .cu-sm-col-start-11 {
-      grid-column-start: 11;
-    }
-
-    .cu-sm-col-start-12 {
-      grid-column-start: 12;
-    }
-
-    .cu-sm-col-start-13 {
-      grid-column-start: 13;
-    }
-
-    .cu-sm-col-start-2 {
-      grid-column-start: 2;
-    }
-
-    .cu-sm-col-start-3 {
-      grid-column-start: 3;
-    }
-
-    .cu-sm-col-start-4 {
-      grid-column-start: 4;
-    }
-
-    .cu-sm-col-start-5 {
-      grid-column-start: 5;
-    }
-
-    .cu-sm-col-start-6 {
-      grid-column-start: 6;
-    }
-
-    .cu-sm-col-start-7 {
-      grid-column-start: 7;
-    }
-
-    .cu-sm-col-start-8 {
-      grid-column-start: 8;
-    }
-
-    .cu-sm-col-start-9 {
-      grid-column-start: 9;
-    }
-
-    .cu-sm-col-start-auto {
-      grid-column-start: auto;
-    }
-
     .cu-sm-flex {
       display: flex;
     }
@@ -265,62 +101,6 @@
       gap: var(--canon-space-3);
     }
 
-    .cu-sm-grid {
-      display: grid;
-    }
-
-    .cu-sm-grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-auto {
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
-
     .cu-sm-hidden {
       display: none;
     }
@@ -405,58 +185,6 @@
       border-radius: var(--canon-radius-2);
     }
 
-    .cu-sm-row-span-1 {
-      grid-row: span 1 / span 1;
-    }
-
-    .cu-sm-row-span-10 {
-      grid-row: span 10 / span 10;
-    }
-
-    .cu-sm-row-span-11 {
-      grid-row: span 11 / span 11;
-    }
-
-    .cu-sm-row-span-12 {
-      grid-row: span 12 / span 12;
-    }
-
-    .cu-sm-row-span-2 {
-      grid-row: span 2 / span 2;
-    }
-
-    .cu-sm-row-span-3 {
-      grid-row: span 3 / span 3;
-    }
-
-    .cu-sm-row-span-4 {
-      grid-row: span 4 / span 4;
-    }
-
-    .cu-sm-row-span-5 {
-      grid-row: span 5 / span 5;
-    }
-
-    .cu-sm-row-span-6 {
-      grid-row: span 6 / span 6;
-    }
-
-    .cu-sm-row-span-7 {
-      grid-row: span 7 / span 7;
-    }
-
-    .cu-sm-row-span-8 {
-      grid-row: span 8 / span 8;
-    }
-
-    .cu-sm-row-span-9 {
-      grid-row: span 9 / span 9;
-    }
-
-    .cu-sm-row-span-auto {
-      grid-row: span auto / span auto;
-    }
-
     .cu-sm-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css
index 10b6e44380..0efa83e034 100644
--- a/packages/canon/src/css/utilities/xl.css
+++ b/packages/canon/src/css/utilities/xl.css
@@ -49,170 +49,6 @@
       border-style: solid;
     }
 
-    .cu-xl-col-end-1 {
-      grid-column-end: 1;
-    }
-
-    .cu-xl-col-end-10 {
-      grid-column-end: 10;
-    }
-
-    .cu-xl-col-end-11 {
-      grid-column-end: 11;
-    }
-
-    .cu-xl-col-end-12 {
-      grid-column-end: 12;
-    }
-
-    .cu-xl-col-end-13 {
-      grid-column-end: 13;
-    }
-
-    .cu-xl-col-end-2 {
-      grid-column-end: 2;
-    }
-
-    .cu-xl-col-end-3 {
-      grid-column-end: 3;
-    }
-
-    .cu-xl-col-end-4 {
-      grid-column-end: 4;
-    }
-
-    .cu-xl-col-end-5 {
-      grid-column-end: 5;
-    }
-
-    .cu-xl-col-end-6 {
-      grid-column-end: 6;
-    }
-
-    .cu-xl-col-end-7 {
-      grid-column-end: 7;
-    }
-
-    .cu-xl-col-end-8 {
-      grid-column-end: 8;
-    }
-
-    .cu-xl-col-end-9 {
-      grid-column-end: 9;
-    }
-
-    .cu-xl-col-end-auto {
-      grid-column-end: auto;
-    }
-
-    .cu-xl-col-span-1 {
-      grid-column: span 1 / span 1;
-    }
-
-    .cu-xl-col-span-10 {
-      grid-column: span 10 / span 10;
-    }
-
-    .cu-xl-col-span-11 {
-      grid-column: span 11 / span 11;
-    }
-
-    .cu-xl-col-span-12 {
-      grid-column: span 12 / span 12;
-    }
-
-    .cu-xl-col-span-2 {
-      grid-column: span 2 / span 2;
-    }
-
-    .cu-xl-col-span-3 {
-      grid-column: span 3 / span 3;
-    }
-
-    .cu-xl-col-span-4 {
-      grid-column: span 4 / span 4;
-    }
-
-    .cu-xl-col-span-5 {
-      grid-column: span 5 / span 5;
-    }
-
-    .cu-xl-col-span-6 {
-      grid-column: span 6 / span 6;
-    }
-
-    .cu-xl-col-span-7 {
-      grid-column: span 7 / span 7;
-    }
-
-    .cu-xl-col-span-8 {
-      grid-column: span 8 / span 8;
-    }
-
-    .cu-xl-col-span-9 {
-      grid-column: span 9 / span 9;
-    }
-
-    .cu-xl-col-span-auto {
-      grid-column: span auto / span auto;
-    }
-
-    .cu-xl-col-start-1 {
-      grid-column-start: 1;
-    }
-
-    .cu-xl-col-start-10 {
-      grid-column-start: 10;
-    }
-
-    .cu-xl-col-start-11 {
-      grid-column-start: 11;
-    }
-
-    .cu-xl-col-start-12 {
-      grid-column-start: 12;
-    }
-
-    .cu-xl-col-start-13 {
-      grid-column-start: 13;
-    }
-
-    .cu-xl-col-start-2 {
-      grid-column-start: 2;
-    }
-
-    .cu-xl-col-start-3 {
-      grid-column-start: 3;
-    }
-
-    .cu-xl-col-start-4 {
-      grid-column-start: 4;
-    }
-
-    .cu-xl-col-start-5 {
-      grid-column-start: 5;
-    }
-
-    .cu-xl-col-start-6 {
-      grid-column-start: 6;
-    }
-
-    .cu-xl-col-start-7 {
-      grid-column-start: 7;
-    }
-
-    .cu-xl-col-start-8 {
-      grid-column-start: 8;
-    }
-
-    .cu-xl-col-start-9 {
-      grid-column-start: 9;
-    }
-
-    .cu-xl-col-start-auto {
-      grid-column-start: auto;
-    }
-
     .cu-xl-flex {
       display: flex;
     }
@@ -237,90 +73,6 @@
       flex-wrap: wrap-reverse;
     }
 
-    .cu-xl-gap-2xl {
-      gap: var(--canon-space-12);
-    }
-
-    .cu-xl-gap-lg {
-      gap: var(--canon-space-8);
-    }
-
-    .cu-xl-gap-md {
-      gap: var(--canon-space-6);
-    }
-
-    .cu-xl-gap-none {
-      gap: 0;
-    }
-
-    .cu-xl-gap-sm {
-      gap: var(--canon-space-4);
-    }
-
-    .cu-xl-gap-xl {
-      gap: var(--canon-space-10);
-    }
-
-    .cu-xl-gap-xs {
-      gap: var(--canon-space-3);
-    }
-
-    .cu-xl-grid {
-      display: grid;
-    }
-
-    .cu-xl-grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-auto {
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
-
     .cu-xl-hidden {
       display: none;
     }
@@ -405,58 +157,6 @@
       border-radius: var(--canon-radius-2);
     }
 
-    .cu-xl-row-span-1 {
-      grid-row: span 1 / span 1;
-    }
-
-    .cu-xl-row-span-10 {
-      grid-row: span 10 / span 10;
-    }
-
-    .cu-xl-row-span-11 {
-      grid-row: span 11 / span 11;
-    }
-
-    .cu-xl-row-span-12 {
-      grid-row: span 12 / span 12;
-    }
-
-    .cu-xl-row-span-2 {
-      grid-row: span 2 / span 2;
-    }
-
-    .cu-xl-row-span-3 {
-      grid-row: span 3 / span 3;
-    }
-
-    .cu-xl-row-span-4 {
-      grid-row: span 4 / span 4;
-    }
-
-    .cu-xl-row-span-5 {
-      grid-row: span 5 / span 5;
-    }
-
-    .cu-xl-row-span-6 {
-      grid-row: span 6 / span 6;
-    }
-
-    .cu-xl-row-span-7 {
-      grid-row: span 7 / span 7;
-    }
-
-    .cu-xl-row-span-8 {
-      grid-row: span 8 / span 8;
-    }
-
-    .cu-xl-row-span-9 {
-      grid-row: span 9 / span 9;
-    }
-
-    .cu-xl-row-span-auto {
-      grid-row: span auto / span auto;
-    }
-
     .cu-xl-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css
index e85832fe44..1d8dae99cd 100644
--- a/packages/canon/src/css/utilities/xs.css
+++ b/packages/canon/src/css/utilities/xs.css
@@ -48,170 +48,6 @@
     border-style: solid;
   }
 
-  .cu-col-end-1 {
-    grid-column-end: 1;
-  }
-
-  .cu-col-end-10 {
-    grid-column-end: 10;
-  }
-
-  .cu-col-end-11 {
-    grid-column-end: 11;
-  }
-
-  .cu-col-end-12 {
-    grid-column-end: 12;
-  }
-
-  .cu-col-end-13 {
-    grid-column-end: 13;
-  }
-
-  .cu-col-end-2 {
-    grid-column-end: 2;
-  }
-
-  .cu-col-end-3 {
-    grid-column-end: 3;
-  }
-
-  .cu-col-end-4 {
-    grid-column-end: 4;
-  }
-
-  .cu-col-end-5 {
-    grid-column-end: 5;
-  }
-
-  .cu-col-end-6 {
-    grid-column-end: 6;
-  }
-
-  .cu-col-end-7 {
-    grid-column-end: 7;
-  }
-
-  .cu-col-end-8 {
-    grid-column-end: 8;
-  }
-
-  .cu-col-end-9 {
-    grid-column-end: 9;
-  }
-
-  .cu-col-end-auto {
-    grid-column-end: auto;
-  }
-
-  .cu-col-span-1 {
-    grid-column: span 1 / span 1;
-  }
-
-  .cu-col-span-10 {
-    grid-column: span 10 / span 10;
-  }
-
-  .cu-col-span-11 {
-    grid-column: span 11 / span 11;
-  }
-
-  .cu-col-span-12 {
-    grid-column: span 12 / span 12;
-  }
-
-  .cu-col-span-2 {
-    grid-column: span 2 / span 2;
-  }
-
-  .cu-col-span-3 {
-    grid-column: span 3 / span 3;
-  }
-
-  .cu-col-span-4 {
-    grid-column: span 4 / span 4;
-  }
-
-  .cu-col-span-5 {
-    grid-column: span 5 / span 5;
-  }
-
-  .cu-col-span-6 {
-    grid-column: span 6 / span 6;
-  }
-
-  .cu-col-span-7 {
-    grid-column: span 7 / span 7;
-  }
-
-  .cu-col-span-8 {
-    grid-column: span 8 / span 8;
-  }
-
-  .cu-col-span-9 {
-    grid-column: span 9 / span 9;
-  }
-
-  .cu-col-span-auto {
-    grid-column: span auto / span auto;
-  }
-
-  .cu-col-start-1 {
-    grid-column-start: 1;
-  }
-
-  .cu-col-start-10 {
-    grid-column-start: 10;
-  }
-
-  .cu-col-start-11 {
-    grid-column-start: 11;
-  }
-
-  .cu-col-start-12 {
-    grid-column-start: 12;
-  }
-
-  .cu-col-start-13 {
-    grid-column-start: 13;
-  }
-
-  .cu-col-start-2 {
-    grid-column-start: 2;
-  }
-
-  .cu-col-start-3 {
-    grid-column-start: 3;
-  }
-
-  .cu-col-start-4 {
-    grid-column-start: 4;
-  }
-
-  .cu-col-start-5 {
-    grid-column-start: 5;
-  }
-
-  .cu-col-start-6 {
-    grid-column-start: 6;
-  }
-
-  .cu-col-start-7 {
-    grid-column-start: 7;
-  }
-
-  .cu-col-start-8 {
-    grid-column-start: 8;
-  }
-
-  .cu-col-start-9 {
-    grid-column-start: 9;
-  }
-
-  .cu-col-start-auto {
-    grid-column-start: auto;
-  }
-
   .cu-flex {
     display: flex;
   }
@@ -236,90 +72,6 @@
     flex-wrap: wrap-reverse;
   }
 
-  .cu-gap-2xl {
-    gap: var(--canon-space-12);
-  }
-
-  .cu-gap-lg {
-    gap: var(--canon-space-8);
-  }
-
-  .cu-gap-md {
-    gap: var(--canon-space-6);
-  }
-
-  .cu-gap-none {
-    gap: 0;
-  }
-
-  .cu-gap-sm {
-    gap: var(--canon-space-4);
-  }
-
-  .cu-gap-xl {
-    gap: var(--canon-space-10);
-  }
-
-  .cu-gap-xs {
-    gap: var(--canon-space-3);
-  }
-
-  .cu-grid {
-    display: grid;
-  }
-
-  .cu-grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-10 {
-    grid-template-columns: repeat(10, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-11 {
-    grid-template-columns: repeat(11, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-12 {
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-5 {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-6 {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-7 {
-    grid-template-columns: repeat(7, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-8 {
-    grid-template-columns: repeat(8, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-9 {
-    grid-template-columns: repeat(9, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-auto {
-    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-  }
-
   .cu-hidden {
     display: none;
   }
@@ -404,58 +156,6 @@
     border-radius: var(--canon-radius-2);
   }
 
-  .cu-row-span-1 {
-    grid-row: span 1 / span 1;
-  }
-
-  .cu-row-span-10 {
-    grid-row: span 10 / span 10;
-  }
-
-  .cu-row-span-11 {
-    grid-row: span 11 / span 11;
-  }
-
-  .cu-row-span-12 {
-    grid-row: span 12 / span 12;
-  }
-
-  .cu-row-span-2 {
-    grid-row: span 2 / span 2;
-  }
-
-  .cu-row-span-3 {
-    grid-row: span 3 / span 3;
-  }
-
-  .cu-row-span-4 {
-    grid-row: span 4 / span 4;
-  }
-
-  .cu-row-span-5 {
-    grid-row: span 5 / span 5;
-  }
-
-  .cu-row-span-6 {
-    grid-row: span 6 / span 6;
-  }
-
-  .cu-row-span-7 {
-    grid-row: span 7 / span 7;
-  }
-
-  .cu-row-span-8 {
-    grid-row: span 8 / span 8;
-  }
-
-  .cu-row-span-9 {
-    grid-row: span 9 / span 9;
-  }
-
-  .cu-row-span-auto {
-    grid-row: span auto / span auto;
-  }
-
   .cu-wrap-reverse {
     flex-wrap: wrap-reverse;
   }
diff --git a/packages/canon/src/props/gap-props.ts b/packages/canon/src/props/gap-props.ts
new file mode 100644
index 0000000000..68a03a9f51
--- /dev/null
+++ b/packages/canon/src/props/gap-props.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { PropDef } from './prop-def';
+import { GetPropDefTypes } from './prop-def';
+import { spacingValues } from './spacing.props';
+
+/** @public */
+const gapPropDefs = {
+  gap: {
+    type: 'enum | string',
+    className: 'cu-gap',
+    customProperties: ['--gap'],
+    values: spacingValues,
+    responsive: true,
+    default: '4',
+  },
+} satisfies {
+  gap: PropDef<(typeof spacingValues)[number]>;
+};
+
+/** @public */
+type GapProps = GetPropDefTypes<typeof gapPropDefs>;
+
+export { gapPropDefs };
+export type { GapProps };
diff --git a/packages/canon/src/props/index.ts b/packages/canon/src/props/index.ts
index 79093974b3..fc92cea12d 100644
--- a/packages/canon/src/props/index.ts
+++ b/packages/canon/src/props/index.ts
@@ -19,4 +19,5 @@ export type { MarginProps, marginPropDefs } from './margin.props';
 export type { PaddingProps, paddingPropDefs } from './padding.props';
 export type { PositionProps, positionPropDefs } from './position.props';
 export type { WidthProps, widthPropDefs } from './width.props';
+export type { GapProps, gapPropDefs } from './gap-props';
 export * from './prop-def';
diff --git a/packages/canon/src/utils/extractProps.ts b/packages/canon/src/utils/extractProps.ts
index 70e4249eed..715bf5d36f 100644
--- a/packages/canon/src/utils/extractProps.ts
+++ b/packages/canon/src/utils/extractProps.ts
@@ -27,35 +27,50 @@ export function extractProps(
   let style: React.CSSProperties = props.style || {};
 
   for (const key in propDefs) {
-    if (props.hasOwnProperty(key)) {
-      const value = props[key];
-      const propDefsValues = propDefs[key].values;
-      const propDefsCustomProperties = propDefs[key].customProperties;
-      const propDefsClassName = propDefs[key].className;
-      const isResponsive = propDefs[key].responsive;
+    if (key === 'gap') {
+      console.log(key, propDefs[key]);
+    }
+    // Check if the prop is present or has a default value
+    if (
+      !props.hasOwnProperty(key) &&
+      !propDefs[key].hasOwnProperty('default')
+    ) {
+      continue; // Skip processing if neither is present
+    }
 
-      const handleValue = (val: any, prefix: string = '') => {
-        if (propDefsValues.includes(val)) {
-          className += ` ${prefix}${propDefsClassName}-${val}`;
-        } else {
-          const customPropertyKey =
-            isResponsive && prefix
-              ? `${propDefsCustomProperties}-${prefix.slice(0, -1)}`
-              : propDefsCustomProperties;
-          (style as any)[customPropertyKey] = val;
-          className += ` ${prefix}${propDefsClassName}`;
-        }
-      };
+    const value = props.hasOwnProperty(key)
+      ? props[key]
+      : propDefs[key].default;
+    const propDefsValues = propDefs[key].values;
+    const propDefsCustomProperties = propDefs[key].customProperties;
+    const propDefsClassName = propDefs[key].className;
+    const isResponsive = propDefs[key].responsive;
 
-      if (isResponsive && typeof value === 'object') {
-        // Handle responsive object values
-        for (const breakpoint in value) {
-          const prefix = breakpoint === 'initial' ? '' : `${breakpoint}:`;
-          handleValue(value[breakpoint], prefix);
-        }
+    if (key === 'gap') {
+      console.log('coco', key, propDefs[key], value);
+    }
+
+    const handleValue = (val: any, prefix: string = '') => {
+      if (propDefsValues.includes(val)) {
+        className += ` ${prefix}${propDefsClassName}-${val}`;
       } else {
-        handleValue(value);
+        const customPropertyKey =
+          isResponsive && prefix
+            ? `${propDefsCustomProperties}-${prefix.slice(0, -1)}`
+            : propDefsCustomProperties;
+        (style as any)[customPropertyKey] = val;
+        className += ` ${prefix}${propDefsClassName}`;
       }
+    };
+
+    if (isResponsive && typeof value === 'object') {
+      // Handle responsive object values
+      for (const breakpoint in value) {
+        const prefix = breakpoint === 'initial' ? '' : `${breakpoint}:`;
+        handleValue(value[breakpoint], prefix);
+      }
+    } else {
+      handleValue(value);
     }
   }