From 27e831dc88bc378d8e0eb5705e1a42592fc2686e Mon Sep 17 00:00:00 2001 From: Kacper Date: Wed, 7 Jun 2023 12:34:00 +0200 Subject: [PATCH 1/3] readme.md --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 3a460b48..cd9adcd2 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://Kacper-Leman.github.io/layout_catalog_grid/) > Follow [this instructions](https://github.com/mate-academy/layout_task-guideline#how-to-solve-the-layout-tasks-on-github) From cedefe2ccb6f1313d52ab13e3efc9028539281fb Mon Sep 17 00:00:00 2001 From: Kacper Date: Wed, 7 Jun 2023 13:55:48 +0200 Subject: [PATCH 2/3] Make soultion to task --- src/index.html | 19 ++++++++++--------- src/styles/_catalog.scss | 28 +++++++++++++++++----------- src/styles/main.scss | 2 +- src/styles/utils/_variables.scss | 1 + 4 files changed, 29 insertions(+), 21 deletions(-) create mode 100644 src/styles/utils/_variables.scss diff --git a/src/index.html b/src/index.html index af41a22d..770da62b 100644 --- a/src/index.html +++ b/src/index.html @@ -17,35 +17,35 @@
- @@ -76,3 +76,4 @@ + diff --git a/src/styles/_catalog.scss b/src/styles/_catalog.scss index a63c46d7..997d4434 100644 --- a/src/styles/_catalog.scss +++ b/src/styles/_catalog.scss @@ -1,22 +1,28 @@ .catalog { - display: flex; - flex-wrap: wrap; - - max-width: 944px; + display: grid; + gap: 48px; + justify-content: center; margin: 0 auto; + grid-template-columns: repeat(1, $cardWidth); &__card { - display: flex; - justify-content: center; - align-items: center; - width: 200px; + display: grid; + place-items: center; + width: $cardWidth; 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, $cardWidth); + } + + @media (min-width: 768px) { + grid-template-columns: repeat(3, $cardWidth); + } + + @media (min-width: 1024px) { + grid-template-columns: repeat(4, $cardWidth); } } diff --git a/src/styles/main.scss b/src/styles/main.scss index cf7e6948..173d4fd0 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -9,6 +9,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..faad7242 --- /dev/null +++ b/src/styles/utils/_variables.scss @@ -0,0 +1 @@ +$cardWidth: 200px; From 4bd6f66a89190ec2e89fee4e8d3198d3ff4fd7b1 Mon Sep 17 00:00:00 2001 From: Kacper Date: Fri, 9 Jun 2023 10:26:54 +0200 Subject: [PATCH 3/3] Make fixes after review --- src/index.html | 2 +- src/styles/_catalog.scss | 19 +++++++++---------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/index.html b/src/index.html index 770da62b..91757b71 100644 --- a/src/index.html +++ b/src/index.html @@ -33,7 +33,7 @@ Smartphones
  • - Laptops & computers + Laptops & computers
  • Gadgets diff --git a/src/styles/_catalog.scss b/src/styles/_catalog.scss index 997d4434..1bfa60f6 100644 --- a/src/styles/_catalog.scss +++ b/src/styles/_catalog.scss @@ -3,16 +3,6 @@ gap: 48px; justify-content: center; margin: 0 auto; - grid-template-columns: repeat(1, $cardWidth); - - &__card { - display: grid; - place-items: center; - width: $cardWidth; - height: 300px; - border: 1px solid #ccc; - border-radius: 5px; - } @media (min-width: 488px) { grid-template-columns: repeat(2, $cardWidth); @@ -25,4 +15,13 @@ @media (min-width: 1024px) { grid-template-columns: repeat(4, $cardWidth); } + + &__card { + display: grid; + place-items: center; + width: $cardWidth; + height: 300px; + border: 1px solid #ccc; + border-radius: 5px; + } }