Single price grid using CSS Grid / Mobile-first
Design comparison
Solution retrospective
Had some hard time doing this. The mobile part was really easy and managed to do it quite quickly. However, the desktop layout gave me a lot of headache (maybe because I'm still not so familiar with CSS GRID). Basically, I couldn't make the cards in the 2nd row to be the same size, so I had to do a lot of work around to make that happen, and I fell I did it the worst way possible. Can someone tell me why did that happen? While using the grid layout, I did set 4 columns with same width, but looking into dev tools, the first two columns were much smaller than the others. Was this happening because of the card-2 width?
Community feedback
- @nottohavePosted over 2 years ago
Hi Caio De Alcantara, great work on finishing the challenge. I tested the responsiveness and it looked good on Mobile and Desktop. For your grid concern on Desktop view, you should redefine :
- the
grid-template ...togrid-template-colums: (repeat(2, 22rem)); grid-template-areas: "card1 card1" "card2 card3" "card4 card4";- Remove
grid-column and grid row startin.card1 . card2 .card3 - change
.card3 {grid-area: card2}to card3
You can test this on the Dev tools before changing your code to see how it works.
Let me know if this helps :D Have a great one.
Marked as helpful0@caio-alcantaraPosted over 2 years ago@nottohave Thanks a lot for the feedback. I'm gonna try that as soon as I can and I'll tell you how it went!
1 - the
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