mate-academy · Patryk-Buczkowski · Jun 17, 2023 · Jun 17, 2023 · Jun 17, 2023
diff --git a/grid.md b/grid.md
@@ -2,4 +2,4 @@
 
 - create a new branch(for example `grid`) from your existing solution `develop`(flex)
 - implement layout on grid(replace flex with grid)
-- create new Pull Request from created branch, into PR compare branch `develop` with branch `grid` (should be visible changes only from `flex` to `grid`)
+- create new Pull Request from created branch, into PR compare branch `develop` with branch `grid` (should be visible changes only from `flex` to `grid`).
diff --git a/readme.md b/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://Patryk-Buczkowski.github.io/layout_catalog_grid/)
 
 > Follow [this instructions](https://github.com/mate-academy/layout_task-guideline#how-to-solve-the-layout-tasks-on-github)
 

diff --git a/src/index.html b/src/index.html
@@ -17,35 +17,77 @@
   </head>
   <body>
     <header class="header">
-      <a class="header__logo" href="">
+      <a class="header__logo" href="home">
         <img src="./images/logo.png" alt="Moyo logo">
       </a>
 
       <nav class="nav">
         <ul class="nav__list">
           <li class="nav__item nav__item--is-active">
-            <a href="" class="nav__link">Apple</a>
+            <a
+              href="apple"
+              class="nav__link"
+            >
+              Apple
+            </a>
           </li>
+
           <li class="nav__item">
-            <a href="" class="nav__link">Samsung</a>
+            <a
+              href="samsung"
+              class="nav__link"
+            >
+              Samsung
+            </a>
           </li>
+
           <li class="nav__item">
-            <a href="" class="nav__link">Smartphones</a>
+            <a
+              href="smartphones"
+              class="nav__link"
+            >
+              Smartphones
+            </a>
           </li>
+
           <li class="nav__item">
-            <a href="" class="nav__link">Laptops & computers</a>
+            <a
+              href="laptops & computers" class="nav__link"
+            >
+              Laptops & computers
+            </a>
           </li>
+
           <li class="nav__item">
-            <a href="" class="nav__link">Gadgets</a>
+            <a
+              href="gadgets" class="nav__link"
+            >
+              Gadgets
+            </a>
           </li>
           <li class="nav__item">
-            <a href="" class="nav__link">Tablets</a>
+            <a
+              href="tablets" class="nav__link"
+            >
+              Tablets
+            </a>
           </li>
+
           <li class="nav__item">
-            <a href="" class="nav__link">Photo</a>
+            <a
+              href="photo" class="nav__link"
+            >
+              Photo
+            </a>
           </li>
+
           <li class="nav__item">
-            <a href="" class="nav__link">Video</a>
+            <a
+            href="video"
+            class="nav__link"
+            >
+              Video
+            </a>
           </li>
         </ul>
       </nav>
@@ -55,21 +97,27 @@
       <div class="catalog__card">
         Product card
       </div>
+
       <div class="catalog__card">
         Product card
       </div>
+
       <div class="catalog__card">
         Product card
       </div>
+
       <div class="catalog__card">
         Product card
       </div>
+
       <div class="catalog__card">
         Product card
       </div>
+
       <div class="catalog__card">
         Product card
       </div>
+
       <div class="catalog__card">
         Product card
       </div>

diff --git a/src/styles/_catalog.scss b/src/styles/_catalog.scss
@@ -1,9 +1,9 @@
 .catalog {
-  display: flex;
-  flex-wrap: wrap;
-
-  max-width: 944px;
-  margin: 0 auto;
+  display: grid;
+  grid-auto-flow: row;
+  grid-template-columns: repeat(1, 200px);
+  gap: 48px;
+  justify-content: center;
 
   &__card {
     display: flex;
@@ -13,10 +13,17 @@
     height: 300px;
     border: 1px solid #ccc;
     border-radius: 5px;
-    margin-bottom: 48px;
   }
 
-  &__card:not(:nth-child(4n)) {
-    margin-right: 48px;
+  @media (min-width:488px) {
+    grid-template-columns: repeat(2, 200px);
+  }
+
+  @media (min-width:768px) {
+    grid-template-columns: repeat(3, 200px);
+  }
+
+  @media (min-width:1024px) {
+    grid-template-columns: repeat(4, 200px);
   }
 }