demo2

app/components/layout/Grid.tsx

@@ -5,7 +5,13 @@ interface GridProps {
   children: ReactNode;
   className?: string;
   config?: Partial<LayoutConfig>;
-  cols?: 1 | 2 | 3 | 4 | 6 | 12;
+  cols?: 1 | 2 | 3 | 4 | 6 | 12 | {
+    xs?: 1 | 2 | 3 | 4 | 6 | 12;
+    sm?: 1 | 2 | 3 | 4 | 6 | 12;
+    md?: 1 | 2 | 3 | 4 | 6 | 12;
+    lg?: 1 | 2 | 3 | 4 | 6 | 12;
+    xl?: 1 | 2 | 3 | 4 | 6 | 12;
+  };
   gap?: 'sm' | 'md' | 'lg' | 'xl';
   responsive?: {
     sm?: 1 | 2 | 3 | 4 | 6 | 12;
@@ -35,19 +41,45 @@ export function Grid({
   };
   
   const gapClasses = {
-    sm: 'gap-2',
-    md: 'gap-4',
-    lg: 'gap-6',
-    xl: 'gap-8',
+    sm: 'gap-2 sm:gap-2.5 md:gap-3',
+    md: 'gap-3 sm:gap-4 md:gap-5 lg:gap-6',
+    lg: 'gap-4 sm:gap-5 md:gap-6 lg:gap-8',
+    xl: 'gap-6 sm:gap-7 md:gap-8 lg:gap-10',
   };
   
-  const responsiveClasses = Object.entries(responsive)
-    .map(([breakpoint, cols]) => `${breakpoint}:${colsClasses[cols]}`)
-    .join(' ');
+  // Handle both old responsive prop and new cols object format
+  let gridColsClass = '';
+  
+  if (typeof cols === 'object') {
+    // New format: cols={{ xs: 1, sm: 2, md: 3, lg: 4 }}
+    const xs = cols.xs || 1;
+    const sm = cols.sm || cols.xs || 1;
+    const md = cols.md || cols.sm || cols.xs || 2;
+    const lg = cols.lg || cols.md || cols.sm || 3;
+    const xl = cols.xl || cols.lg || cols.md || 4;
+    
+    gridColsClass = `
+      ${colsClasses[xs]}
+      sm:${colsClasses[sm]}
+      md:${colsClasses[md]}
+      lg:${colsClasses[lg]}
+      xl:${colsClasses[xl]}
+    `;
+  } else {
+    // Old format: cols={4} with responsive prop
+    gridColsClass = colsClasses[cols];
+    
+    if (Object.keys(responsive).length > 0) {
+      const responsiveClasses = Object.entries(responsive)
+        .map(([breakpoint, cols]) => `${breakpoint}:${colsClasses[cols]}`)
+        .join(' ');
+      gridColsClass = `${gridColsClass} ${responsiveClasses}`;
+    }
+  }
   
   return (
     <div 
-      className={`grid-rtl ${colsClasses[cols]} ${gapClasses[gap]} ${responsiveClasses} ${className}`}
+      className={`grid ${gridColsClass} ${gapClasses[gap]} ${className}`}
       dir={layoutConfig.direction}
     >
       {children}