[Feat] DashboardList 반응형 디자인 적용

eunji-0623 · May 31, 2024 · 42e0bbd · 42e0bbd
1 parent 7367c66
commit 42e0bbd
Showing 1 changed file with 24 additions and 0 deletions.
diff --git a/src/pages/myDashboard/components/DashboardList/DashboardList.module.scss b/src/pages/myDashboard/components/DashboardList/DashboardList.module.scss
@@ -16,3 +16,27 @@
   align-items: center;
   gap: 13px;
 }
+
+@media screen and (max-width: 1024px) {
+  .container {
+    width: 504px;
+  }
+
+  .dashboardList {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 68px 68px 68px;
+    gap: 10px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .container {
+    width: 260px;
+  }
+
+  .dashboardList {
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(6, 58px);
+    gap: 8px;
+  }
+}