catalog grid 1

readme.md

@@ -1,6 +1,6 @@
 # Frontend practice with catalog page using grid
 Replace `<your_account>` with your Github username and copy the links to Pull Request description:
-- [DEMO LINK](https://<your_account>.github.io/layout_catalog_grid/)
+- [DEMO LINK](https://steveforde.github.io/layout_catalog_grid/)
 
 > Follow [this instructions](https://github.com/mate-academy/layout_task-guideline#how-to-solve-the-layout-tasks-on-github)
 

src/styles/_catalog.scss

@@ -1,22 +1,37 @@
-.catalog {
-  display: flex;
-  flex-wrap: wrap;
+$card-width: 200px;
 
+.catalog {
+  display: grid;
+  grid-gap: 48px;
   max-width: 944px;
   margin: 0 auto;
+  justify-content: center;
+  align-items: center;
+
+  @media (min-width: 1024px) {
+    grid-template-columns: repeat(4, $card-width);
+  }
 
-  &__card {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 200px;
-    height: 300px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    margin-bottom: 48px;
+  @media (min-width: 768px) and (max-width: 1023px) {
+    grid-template-columns: repeat(3, $card-width);
   }
 
-  &__card:not(:nth-child(4n)) {
-    margin-right: 48px;
+  @media (min-width: 488px) and (max-width: 767px) {
+    grid-template-columns: repeat(2, $card-width);
   }
+
+  @media (max-width: 487px) {
+    grid-template-columns: repeat(1, $card-width);
+  }
+}
+
+.catalog__card {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: $card-width;
+  height: 300px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  margin: 0;
 }