Skip to content
Submitted almost 5 years ago

Single Price Grid Component using HTML/CSS - Grid

Josh Prentice•235
@jfprentice
A solution to the Single price grid component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Could only work on this for 10-20 minutes a day because of work so it took me a few days to complete - ended up scrapping my original styling and redoing all of it the first day I had off.

I used the PixelPerfect extension to duplicate the layout but ended up getting frustrated by trying to get every perfect. That being said, the layout isn't perfect.

I really need to work on my CSS abstraction.

Any and all critiques are welcome! Thanks for looking!

Code

Please log in to post a comment

Log in

Community feedback

  • Roman Filenko•3,335
    @rfilenko

    Hi Josh, good job, don't see any big mistakes here. Some tips for you:

    • border-radius can be set only once on parent container with overflow:hidden;
    • same with spacing inside some parent element (padding);
    • try to be more consistent with values;
    • preferable to use rems and ems;
    • vertical rhythm also proved to be a great pattern (defining spaces beetween elements in one direction, like margin-bottom);

    Hope this was helpful, Roman

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