Design comparison
Solution retrospective
Hello. I finished this project and I would like to hear your feedback and tips.
What I learned new is:
- The auto property for
marginI used to move the SVG's to the right side; the auto property stretches or eliminates all the empty spacing; hence, it automatically shifts elements to the other side. Correct me if I am wrong. - I want to know if there are better approaches in using Grid to place cards, what do you think of
grid-template-areas?
Any feedbacks are welcome. Thanks :)
Community feedback
- @gfunk77Posted 11 months ago
Nice job on your solution. The project looks really nice. I see that you have a lot of repeated styles for each of the cards like padding, margin, margin-bottom etc. perhaps you could make a mixin for card and have a few variables. This would really consolidate your styles a lot.
As for the grid of cards, what you did works just fine. Really great actually. Another approach would be just to use flex box. Wrap the inner cards in their own container and do a flex column for the inner, and flex row for the outer. I think it would be a lot more concise.
Your solution is great. I hope these comments help in some way. Well done.
Marked as helpful1@Mazz100Posted 11 months ago@gfunk77 Thanks for your great feedback.
I liked the extra mixin this can really lessen the code and make it more cleaner, definitely will consider it in future projects.
Very great approach with flexbox thanks for suggesting that, I always give myself a rule with multiple columns and rows comes the grid but with only one of them I can use flexbox, either ways I will take note and challenge myself with applying different approaches.
Very helpful comment thank you. :)
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord