From 49a4a4086390131c122cc1cffc544ceb22b0494a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=87=91=E4=BC=9F=E5=BC=BA?= <iamjoel007@gmail.com>
Date: Thu, 18 May 2023 17:58:48 +0800
Subject: [PATCH] chore: app card ui

---
 web/app/components/explore/app-list/index.tsx        |  2 +-
 web/app/components/explore/app-list/style.module.css | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index c5ebc130a8..b1d57b804c 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -90,7 +90,7 @@ const Apps: FC = ({ }) => {
         }}
       >
         <nav
-          className={`${s.appList} grid content-start grid-cols-1 gap-4 px-12 pb-10 md:grid-cols-2 grow shrink-0`}>
+          className={`${s.appList} grid content-start grid-cols-1 gap-4 px-12 pb-10grow shrink-0`}>
           {currList.map(app => (
             <AppCard 
               key={app.app_id}
diff --git a/web/app/components/explore/app-list/style.module.css b/web/app/components/explore/app-list/style.module.css
index 1e393041e4..856c884ec1 100644
--- a/web/app/components/explore/app-list/style.module.css
+++ b/web/app/components/explore/app-list/style.module.css
@@ -2,4 +2,16 @@
   .appList {
     grid-template-columns: repeat(4, minmax(0, 1fr))
   }
+}
+
+@media (min-width: 1300px) and (max-width: 1624px) {
+  .appList {
+    grid-template-columns: repeat(3, minmax(0, 1fr))
+  }
+}
+
+@media (min-width: 1025px) and (max-width: 1300px) {
+  .appList {
+    grid-template-columns: repeat(2, minmax(0, 1fr))
+  }
 }
\ No newline at end of file