Submitted over 2 years ago

Single price grid using CSS Grid / Mobile-first

Caio de Alcantara Santos• 250

@caio-alcantara

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Single price grid component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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

Cacti• 390

@nottohave

Posted 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 ... to grid-template-colums: (repeat(2, 22rem));
grid-template-areas: "card1 card1" "card2 card3" "card4 card4";
Remove grid-column and grid row start in .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 helpful

Caio de Alcantara Santos• 250

@caio-alcantara

Posted 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!

Please log in to post a comment

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