Order Summary Component

Solution retrospective
I was so proud to be using a grid layout within a flex layout. Though, I could have gone with just grid; I don't want to pick sides yet in the never-ending grid/flex war.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Jorgus1710
Hey, very nice card! I noticed however that the mobile view isn't optimized. Perhaps a mobile first approach will be a good habit when doing projects, it certainly has been helping me.
I think it's great you used the grid approach to lay out the items in the middle of the card. I just did the challenge myself and decided to use flexbox for that section. If your curious how to get the same result using flexbox, I did it as follows to your "grid-columns":
display: flex; align-items: center; justify-content: space-between;
Setting the display to flex aligns the items into rows by default. After that, to move the items within the container as per design image I simply played with "margin-left" values of the items in the container to offset them however I wanted. I'll be referencing your approach to grid when the time comes for me to begin using it, thanks and keep up the good work!
Marked as helpful
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