From 25a4ee6dc09c10c6095531a0fedd4d63928a6aac Mon Sep 17 00:00:00 2001
From: andr-ew <andrewcshike@gmail.com>
Date: Wed, 12 Jul 2023 22:47:11 -0500
Subject: [PATCH] home: style products grid layout

---
 components/home/index.js           | 10 +---------
 components/home/styles.module.scss |  7 +++++++
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/components/home/index.js b/components/home/index.js
index f14ab9988..5384cbab2 100644
--- a/components/home/index.js
+++ b/components/home/index.js
@@ -37,20 +37,12 @@ export async function HomeProductsList({ collection }) {
         collection,
     });
 
-    // console.log({ collection, products });
-    // const num = 4;
-    // console.log({
-    //     price: products[num].priceRange,
-    //     compareAt: products[num].compareAtPriceRange,
-    //     title: products[num].title,
-    // });
-
     return (
         <>
             {products.length === 0 ? (
                 <p>{`No products found`}</p>
             ) : (
-                <ul>
+                <ul className={styles.homeProductsList}>
                     {products?.map(product => (
                         <li key={product?.handle}>
                             <HomeProduct {...{ product }} />
diff --git a/components/home/styles.module.scss b/components/home/styles.module.scss
index 6d2fa19a4..85bcec02f 100644
--- a/components/home/styles.module.scss
+++ b/components/home/styles.module.scss
@@ -29,3 +29,10 @@
         @include typography.body-cta;
     }
 }
+
+.homeProductsList {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    column-gap: 10px;
+    row-gap: 20px;
+}