From 2603cd16c1d2df480e4a0d5b2d3e21aac4d74786 Mon Sep 17 00:00:00 2001 From: LabPetro Date: Tue, 25 Jul 2023 00:34:14 +0300 Subject: [PATCH] catalog-grid solution --- readme.md | 2 +- src/index.html | 18 +++++++++--------- src/styles/_catalog.scss | 28 +++++++++++++++++++--------- src/styles/main.scss | 1 + src/styles/utils/_variables.scss | 1 + 5 files changed, 31 insertions(+), 19 deletions(-) create mode 100644 src/styles/utils/_variables.scss diff --git a/readme.md b/readme.md index 3a460b48..d5c4419e 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://LabPetro.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..3058b188 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..371fa70a 100644 --- a/src/styles/_catalog.scss +++ b/src/styles/_catalog.scss @@ -1,22 +1,32 @@ .catalog { - display: flex; - flex-wrap: wrap; + display: grid; + justify-content: center; + gap: 48px; - max-width: 944px; - margin: 0 auto; + @media screen and (max-width: 487px) { + grid-template-columns: repeat(1, $card-width); + } + + @media screen and (min-width: 488px) { + grid-template-columns: repeat(2, $card-width); + } + + @media screen and (min-width: 768px) { + grid-template-columns: repeat(3, $card-width); + } + + @media screen and (min-width: 1024px) { + grid-template-columns: repeat(4, $card-width); + } &__card { display: flex; justify-content: center; align-items: center; - width: 200px; + width: $card-width; height: 300px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 48px; } - - &__card:not(:nth-child(4n)) { - margin-right: 48px; - } } diff --git a/src/styles/main.scss b/src/styles/main.scss index cf7e6948..32088421 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -10,5 +10,6 @@ body { box-sizing: border-box; } +@import "./utils/variables"; @import "_header.scss"; @import "_catalog.scss"; diff --git a/src/styles/utils/_variables.scss b/src/styles/utils/_variables.scss new file mode 100644 index 00000000..cd5f0adb --- /dev/null +++ b/src/styles/utils/_variables.scss @@ -0,0 +1 @@ +$card-width: 200px;