diff --git a/grid.md b/grid.md index 88451eb5..d97ff199 100644 --- 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 index 3a460b48..de704410 100644 --- a/readme.md +++ b/readme.md @@ -1,6 +1,6 @@ # Frontend practice with catalog page using grid Replace `` with your Github username and copy the links to Pull Request description: -- [DEMO LINK](https://.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 index af41a22d..921c4aa7 100644 --- a/src/index.html +++ b/src/index.html @@ -17,35 +17,77 @@
- @@ -55,21 +97,27 @@
Product card
+
Product card
+
Product card
+
Product card
+
Product card
+
Product card
+
Product card
diff --git a/src/styles/_catalog.scss b/src/styles/_catalog.scss index a63c46d7..19a50f5b 100644 --- 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); } }