Skip to content
Submitted almost 3 years ago

Single price grid component using flexbox

Rodrigo Nascimento•220
@rodrigovn
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Any comments are very welcome! One thing that I realized about the flexbox : the use of "flex-grow" and "flex-shrink" was very helpful

Community feedback

  • jemeneradev•580
    @jemeneradevPosted almost 3 years ago

    The padding is a bit off in your implementation. You should also add round-corners; the border-radius property will help.

    Here is a tip, which I use all the time. Take the design photos and make them the background, with "position: relative; top:0; left:0; z-index:-1;" It's frustrating trying to guess how much margin or padding to apply, why not use a bit of help.

    Marked as helpful
    0
    Rodrigo Nascimento•220
    @rodrigovnPosted almost 3 years ago

    @jemeneradev that's a very great idea, thank you for the feedback!

    0

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