Submitted about 2 years ago
Four card feature section
@BenjaminNicholasWells
Design comparison
SolutionDesign
Community feedback
- @VCaramesPosted about 2 years ago
Hey @BenjaminNicholasWells, some suggestions to improve you code:
- You can improve on this section of code:
Currently:
.four-card-container { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); grid-template-areas: "..... card2 ....." "card1 card2 card4" "card1 card3 card4" "..... card3 ....." ; } .card1 { grid-area: card1; } .card2 { grid-area: card2; } .card3 { grid-area: card3; } .card4 { grid-area: card4; }
Updated:
.four-card-container { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); grid-template-areas: "card1 card2 card4" "card1 card3 card4" ; } .card1 { grid-area: card1; align-self: center } .card2 { grid-area: card2; } .card3 { grid-area: card3; } .card4 { grid-area: card4; align-self: center }
Happy Coding! 👻🎃
Marked as helpful0@BenjaminNicholasWellsPosted about 2 years ago@vcarames thanks for the input; is there any particular reason why this code is an improvement besides writing less code? I kind of prefer the explicit grid so that it is clearer to anyone looking at the code.
0@VCaramesPosted about 2 years ago@BenjaminNicholasWells
Your code works great. But the less code you use, the better when it comes to coding.
As you get into building larger challenges, the less code you use, the faster your content will load (especially on mobile devices).
0
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