Submitted over 4 years ago

Single price grid component done with CSS Grid

Raquel Ocasio• 50

@RaquelO

Preview site View code

This is a solution for...

Single price grid component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This is my second submission for this design. This time I used HTML5 Boilerplate as a starting template, and the layout is created with CSSGrid. Looking forward to your comments!

Community feedback

Simeon Udoh• 535

@simeon4real

Posted over 4 years ago

@mattstuddert I like desktop first compared to mobile first.

Matt Studdert• 13,611

@mattstuddert

Posted over 4 years ago

@simeon4real that's fair enough. I'd still recommend using min-width media queries though, as it has performance benefits for mobile users and is considered a best practice.

Matt Studdert• 13,611

@mattstuddert

Posted over 4 years ago

Nice work using grid on this challenge Raquel! Here are a couple of pointers on your CSS code:

I'd recommend not using IDs for styling purposes. They're very specific and can't be reused on the page. Instead, stick to class, attribute, pseudo, and type selectors. Your CSS will be much more manageable, especially as you build larger projects!
On a future project, I'd recommend trying to use min-width media queries instead of max-width. It often leads to less CSS code and also has the benefit of loading in fewer styles for mobile users.

I hope this helps. Let me know if you have any questions!

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