add solution#1923
Conversation
lerastarynets
left a comment
lerastarynets
left a comment
There was a problem hiding this comment.
I see you did a hard work) Let's improve it a little bit
| &__card:not(:nth-child(4n)) { | ||
| margin-right: 48px; | ||
| @media (min-width: 489px) { | ||
| grid-template-columns: repeat(2, auto); |
There was a problem hiding this comment.
The grid-template-columns property should be set to 200px instead of auto. This is to ensure that the card width is always 200px including borders as specified in the task description.
| } | ||
|
|
||
| @media (min-width: 768px) { | ||
| grid-template-columns: repeat(3, auto); |
There was a problem hiding this comment.
The grid-template-columns property should be set to 200px instead of auto. This is to ensure that the card width is always 200px including borders as specified in the task description.
| } | ||
|
|
||
| @media (min-width: 1024px) { | ||
| grid-template-columns: repeat(4, auto); |
There was a problem hiding this comment.
The grid-template-columns property should be set to 200px instead of auto. This is to ensure that the card width is always 200px including borders as specified in the task description.
lerastarynets
left a comment
lerastarynets
left a comment
There was a problem hiding this comment.
Great job overall! Left one tiny suggestion for the improvement
| &__card:not(:nth-child(4n)) { | ||
| margin-right: 48px; | ||
| @media (min-width: 489px) { | ||
| grid-template-columns: repeat(2, 200px); |
There was a problem hiding this comment.
You could have used scss variables to store 200px as it's reusable
2 participants
DEMO LINK