Submitted about 5 years ago

Single price grid component using Html Css

gomezlucas•1,115

@gomezlucas

Preview site View code

This is a solution for...Single price grid component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I m not sure about the strategy i used to set the sizes in the body and in the item to made them responsive. Is there a better way?

body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }

.main-header { min-height: 80vh; width: 50%; margin: 0 auto; display: grid; grid-template-areas: "title title" "price info"; grid-template-rows: 45% 55%; grid-template-columns: 50% 50%; }

Community feedback

Matt Studdert•13,611
@mattstuddertPosted about 5 years ago
Hey Lucas, I think the strategy that you've gone with is fine. It obviously works OK. I'd probably go down the route of not applying heights or setting the rows. Instead, I'd just let the padding and margin on elements dictate the overall height of the component. But this isn't to say that my approach is "better" than yours. It's just another way to approach it.

I hope that helps a bit! 👍
1
gomezlucas•1,115
@gomezlucasPosted about 5 years ago
@mattstuddert Thanks for your answer Matt. It helped me a lot. It's good to know different ways to approach the solutions and I wasnt sure if the one i used was ok. I ll try to use yours as well. Thanks again!
0
Matt Studdert•13,611
@mattstuddertPosted about 5 years ago
@gomezlucas you're welcome!
0

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