Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I am happy that I was able to finish this design and also able to use grid layout. Haven't really did much projects in Grid Layouts so it was really nice to be able to do so.
What challenges did you encounter, and how did you overcome them?Initially, I did have a small problem with the sizing of the card when it comes to grid. However, I learned that you don't have to add any widths or height to cards inside of grid-containers, as they are automatically sized.
Especially when you're using grid-row and grid-column for assigning specific positions and sizes for the divs.
#cyan {
border-top: 4px solid var(--Cyan);
grid-column: 1 / 2;
grid-row: 1 / 3;
/* very useful */
align-self: center;
}
#red {
border-top: 4px solid var(--Red);
grid-column: 2 / 3;
grid-row: 1 / 2;
}
#orange {
border-top: 4px solid var(--Orange);
grid-column: 2 / 3;
grid-row: 2 / 3;
}
What specific areas of your project would you like help with?
Always room for improvement. Let me know what I can do to make this more optimal :)
Community feedback
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