Design comparison
Solution retrospective
If there are any improvement that could be made, please tell me!
Thank you!!
Community feedback
- @VCaramesPosted about 2 years ago
Hey @cjay44.
I was going over your coded I see the you tried to create the layout using CSS Grid but you did not use to its full potential.
- You used Position on the "left/right" cards.
- Placed the two center cards in a container to keep them centered.
While the method you used technically does work, it is not best practice. It is more of a "hack' to accomplish it.
Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout; it will give you full control of the layout.
.card-container { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); grid-template-areas: "supervisor team calculator" "supervisor karma calculator"; } .karma-card { grid-area: karma; } .calculator-card { grid-area: calculator; align-self: center; } .team-card { grid-area: team; } .supervisor-card { grid-area: supervisor; align-self: center; }
Here is how I applied it in my challenge:
https://vcarames.github.io/Four-Card-Layout/
Happy Coding! 👻🎃
Marked as helpful1@cjay44Posted about 2 years ago@vcarames Thank you! I admittedly forgot about grid areas. I will have to go back and try to implement this into the solution.
0@VCaramesPosted about 2 years ago@cjay44
The grid-template-areas works wonders. I use it for the majority of my layouts.
1
Please log in to post a comment
Log in with GitHubJoin 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