diff --git a/readme.md b/readme.md index 3a460b48..a8d00e1c 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://Luk2asz.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..75bd5964 100644 --- a/src/index.html +++ b/src/index.html @@ -17,35 +17,35 @@
- diff --git a/src/styles/_catalog.scss b/src/styles/_catalog.scss index a63c46d7..e59184c9 100644 --- a/src/styles/_catalog.scss +++ b/src/styles/_catalog.scss @@ -1,10 +1,22 @@ .catalog { - display: flex; - flex-wrap: wrap; - + display: grid; + gap: 48px; + justify-content: center; max-width: 944px; margin: 0 auto; + @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); + } + &__card { display: flex; justify-content: center;