4 types of layout grids

components/product/ProductCard/ProductCard.module.css

@@ -1,5 +1,5 @@
 .root {
-  @apply relative w-full h-full p-6 box-border overflow-hidden;
+  @apply relative w-full p-6 box-border overflow-hidden;
 }
 
 .productTitle {

components/product/ProductCard/ProductCard.tsx

@@ -16,6 +16,7 @@ interface ProductData {
 
 const ProductCard: FC<Props> = ({ className, productData }) => {
   const rootClassName = cn(s.root, className)
+
   return (
     <div className={rootClassName}>
       {/* Overlay */}
@@ -30,18 +31,17 @@ const ProductCard: FC<Props> = ({ className, productData }) => {
             </div>
           </div>
         </div>
-
         <div className={s.wishlistButton}>
           <Heart />
         </div>
       </div>
 
-      <div className="absolute box-border top-0 left-0 w-full h-full z-0 m-12">
+      {/* <div className="absolute box-border top-0 left-0 w-full z-0 m-12"> */}
-        {/* <img
+      {/* <img
           className="object-cover object-center w-full"
           src={productData.images.edges[0].node.urlSmall}
         /> */}
-      </div>
+      {/* </div> */}
     </div>
   )
 }

components/product/ProductGrid/ProductGrid.module.css

@@ -1,23 +1,23 @@
 .root {
   --row-height: calc(100vh - 80px - 56px);
-  @apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-4 w-full;
+  @apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-2 gap-0;
 
   & > * {
-    @apply row-span-1 lg:col-span-1 h-full bg-black box-border;
+    @apply row-span-1 lg:col-span-1 bg-black border border-yellow-300 box-border overflow-hidden;
     height: 500px;
+    max-height: 800px;
 
     @screen lg {
-      height: auto;
+      height: inherit;
     }
   }
+}
 
+.layoutA {
   & > div:nth-child(6n + 1),
   & > div:nth-child(6n + 5) {
     @apply row-span-2 lg:col-span-2 bg-violet;
-
+    height: var(--row-height);
-    @screen lg {
-      min-height: var(--row-height);
-    }
   }
 
   & > div:nth-child(6n + 5) {
@@ -32,3 +32,55 @@
     @apply bg-cyan;
   }
 }
+
+.layoutB {
+  & > div:nth-child(6n + 2) {
+    @apply row-span-2 lg:col-span-2 bg-violet;
+    height: var(--row-height);
+  }
+
+  & > div:nth-child(6n + 4) {
+    @apply row-span-2 lg:col-span-2 bg-blue;
+    height: var(--row-height);
+  }
+
+  & > div:nth-child(6n + 3) {
+    @apply bg-pink;
+  }
+
+  & > div:nth-child(6n + 6) {
+    @apply bg-cyan;
+  }
+}
+
+.layoutC {
+  & > div:nth-child(12n + 1) {
+    @apply row-span-2 lg:col-span-2 bg-violet;
+    height: var(--row-height);
+  }
+
+  & > div:nth-child(12n + 8) {
+    @apply row-span-2 lg:col-span-2 bg-cyan;
+    height: var(--row-height);
+  }
+
+  & > div:nth-child(6n + 3) {
+    @apply bg-pink;
+  }
+}
+
+.layoutD {
+  & > div:nth-child(12n + 2) {
+    @apply row-span-2 lg:col-span-2 bg-violet;
+    height: var(--row-height);
+  }
+
+  & > div:nth-child(12n + 7) {
+    @apply row-span-2 lg:col-span-2 bg-cyan;
+    height: var(--row-height);
+  }
+
+  & > div:nth-child(6n + 3) {
+    @apply bg-pink;
+  }
+}

components/product/ProductGrid/ProductGrid.tsx

@@ -6,10 +6,20 @@ interface Props {
   className?: string
   children?: any
   products: [any] | any
+  layout?: 'A' | 'B' | 'C' | 'D'
 }
 
-const ProductView: FC<Props> = ({ products, className }) => {
+const ProductView: FC<Props> = ({ products, className, layout = 'A' }) => {
-  const rootClassName = cn(s.root, className)
+  const rootClassName = cn(
+    s.root,
+    {
+      [s.layoutA]: layout === 'A',
+      [s.layoutB]: layout === 'B',
+      [s.layoutC]: layout === 'C',
+      [s.layoutD]: layout === 'D',
+    },
+    className
+  )
   return (
     <div className={rootClassName}>
       {products.map((data: any) => (

pages/index.tsx

@@ -16,17 +16,12 @@ export default function Home({
   return (
     <>
       <ProductGrid
-        products={[
+        products={[...products, ...products, ...products, ...products]}
-          ...products,
+        layout="C"
-          ...products,
-          ...products,
-          ...products,
-          ...products,
-          ...products,
-        ]}
       />
-      <div>asdsasad</div>
+      {/* <ProductGrid products={[...products.slice(0, 3)]} layout={2} /> */}
-      <ProductGrid products={products.slice(3)} />
+      {/* <div></div> */}
+      {/* <ProductGrid products={products.slice(3)} /> */}
     </>
   )
 }