From a6c404ffe278193854e4792ee87a9344a8318ded Mon Sep 17 00:00:00 2001 From: Vadym Panchenko Date: Tue, 30 May 2023 21:20:38 +0300 Subject: [PATCH] add task solution --- src/index.html | 18 +++++++++--------- src/styles/_catalog.scss | 24 +++++++++++++----------- src/styles/main.scss | 14 ++------------ src/styles/reset.scss | 11 +++++++++++ src/styles/variables.scss | 6 ++++++ 5 files changed, 41 insertions(+), 32 deletions(-) create mode 100644 src/styles/reset.scss create mode 100644 src/styles/variables.scss 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..7f97da93 100644 --- a/src/styles/_catalog.scss +++ b/src/styles/_catalog.scss @@ -1,19 +1,21 @@ .catalog { - display: flex; - flex-wrap: wrap; - - max-width: 944px; - margin: 0 auto; + display: grid; + justify-content: center; + gap: 48px; + grid-template-columns: $cardWidth; + @each $size, $amount in $media { + @media (min-width:#{$size}) { + grid-template-columns: repeat($amount, $cardWidth); + } + } &__card { - display: flex; - justify-content: center; - align-items: center; - width: 200px; - height: 300px; + display: grid; + place-items: center; + width: $cardWidth; + height: $cardHeight; border: 1px solid #ccc; border-radius: 5px; - margin-bottom: 48px; } &__card:not(:nth-child(4n)) { diff --git a/src/styles/main.scss b/src/styles/main.scss index cf7e6948..04476919 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,14 +1,4 @@ -html { - font-family: Roboto, sans-serif; -} - -body { - margin: 0; -} - -* { - box-sizing: border-box; -} - @import "_header.scss"; +@import "./variables.scss"; @import "_catalog.scss"; +@import "./reset.scss"; diff --git a/src/styles/reset.scss b/src/styles/reset.scss new file mode 100644 index 00000000..3bb07cca --- /dev/null +++ b/src/styles/reset.scss @@ -0,0 +1,11 @@ +html { + font-family: Roboto, sans-serif; +} + +body { + margin: 0; +} + +* { + box-sizing: border-box; +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 00000000..cf5b9d95 --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,6 @@ +$cardWidth: 200px; +$cardHeight :300px; +$media: + "488px" 2, + "768px" 3, + "1024px" 4;