From f7923c9d3ff3165b7c264af2c1dfe2b199c20508 Mon Sep 17 00:00:00 2001 From: kviatkovskyi mykhailo Date: Sat, 17 Jun 2023 23:08:23 +0300 Subject: [PATCH] solution task --- readme.md | 2 +- src/index.html | 18 +++++++++--------- src/styles/_catalog.scss | 22 ++++++++++++++++------ 3 files changed, 26 insertions(+), 16 deletions(-) diff --git a/readme.md b/readme.md index 3a460b48..ffd25aa8 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://mykhailo-kviatkovskyi.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..9628857c 100644 --- a/src/styles/_catalog.scss +++ b/src/styles/_catalog.scss @@ -1,7 +1,9 @@ -.catalog { - display: flex; - flex-wrap: wrap; +$width-column: 200px; +.catalog { + display: grid; + grid-template-columns: repeat(1, $width-column); + gap: 48px; max-width: 944px; margin: 0 auto; @@ -13,10 +15,18 @@ height: 300px; border: 1px solid #ccc; border-radius: 5px; - margin-bottom: 48px; } +} + +$width: + 488px 2, + 768px 3, + 1024px 4; - &__card:not(:nth-child(4n)) { - margin-right: 48px; +@each $size, $column in $width { + @media (min-width: $size) { + .catalog { + grid-template-columns: repeat($column, $width-column); + } } }