From 2fff3ff966d90bc70f7237d2c7fb2b799670bbe5 Mon Sep 17 00:00:00 2001 From: Lukasz Warda Date: Wed, 14 Jun 2023 17:11:33 +0200 Subject: [PATCH 1/2] add task solution --- readme.md | 2 +- src/index.html | 18 +++++++++--------- src/styles/_catalog.scss | 23 ++++++++++++++++++++--- 3 files changed, 30 insertions(+), 13 deletions(-) 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..68a99c8d 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..bb9ba026 100644 --- a/src/styles/_catalog.scss +++ b/src/styles/_catalog.scss @@ -1,7 +1,6 @@ .catalog { - display: flex; - flex-wrap: wrap; - + display: grid; + gap: 48px; max-width: 944px; margin: 0 auto; @@ -20,3 +19,21 @@ margin-right: 48px; } } + +@media (min-width: 488px) { + .catalog { + grid-template-columns: repeat(2, 200px); + } +} + +@media (min-width: 768px) { + .catalog { + grid-template-columns: repeat(3, 200px); + } +} + +@media (min-width: 1024px) { + .catalog { + grid-template-columns: repeat(4, 200px); + } +} From db36f9da36a6a7f57c41fe2c09cf242c010921aa Mon Sep 17 00:00:00 2001 From: Lukasz Warda Date: Thu, 15 Jun 2023 10:51:49 +0200 Subject: [PATCH 2/2] add task solution --- src/index.html | 18 +++++++++--------- src/styles/_catalog.scss | 31 +++++++++++++------------------ 2 files changed, 22 insertions(+), 27 deletions(-) diff --git a/src/index.html b/src/index.html index 68a99c8d..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 bb9ba026..e59184c9 100644 --- a/src/styles/_catalog.scss +++ b/src/styles/_catalog.scss @@ -1,9 +1,22 @@ .catalog { 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; @@ -19,21 +32,3 @@ margin-right: 48px; } } - -@media (min-width: 488px) { - .catalog { - grid-template-columns: repeat(2, 200px); - } -} - -@media (min-width: 768px) { - .catalog { - grid-template-columns: repeat(3, 200px); - } -} - -@media (min-width: 1024px) { - .catalog { - grid-template-columns: repeat(4, 200px); - } -}