From aec412aff8faa6222055ca7268a866eef146f0f1 Mon Sep 17 00:00:00 2001
From: Hamza Miloud Amar <hamzamiloudamar@gmail.com>
Date: Fri, 22 Nov 2024 01:40:28 +0100
Subject: [PATCH] feat: add grid col to the grid doc

---
 .../_components/playground/grid/gridCol.tsx   | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 apps/docs/src/app/_components/playground/grid/gridCol.tsx

diff --git a/apps/docs/src/app/_components/playground/grid/gridCol.tsx b/apps/docs/src/app/_components/playground/grid/gridCol.tsx
new file mode 100644
index 00000000..d0430640
--- /dev/null
+++ b/apps/docs/src/app/_components/playground/grid/gridCol.tsx
@@ -0,0 +1,36 @@
+import { Grid, GridItem, Paper } from '@pillar-ui/core'
+
+const shared = {
+  className: 'ex-striped',
+  as: Paper,
+  height: '96p',
+  gap: '4',
+  p: '5',
+  corner: '2',
+} as const
+
+export const GridCol = () => {
+  return (
+    <>
+      <Grid gap="3" cols={{ default: 'repeat(5, 1fr)' }}>
+        <GridItem col={{ default: '1/2' }} {...shared}>
+          Hello
+        </GridItem>
+        <GridItem col={{ default: '2/6' }} {...shared}>
+          Hello
+        </GridItem>
+      </Grid>
+      <Grid gap="3" cols={{ default: 'repeat(12, 1fr)' }}>
+        <GridItem col={{ default: 'span 3' }} {...shared}>
+          Hello
+        </GridItem>
+        <GridItem col={{ default: 'span 6' }} {...shared}>
+          Hello
+        </GridItem>
+        <GridItem col={{ default: 'span 3' }} {...shared}>
+          Hello
+        </GridItem>
+      </Grid>
+    </>
+  )
+}