Skip to content
Submitted over 2 years ago

Product preview card component solution using flexbox

sb101-beep•60
@sb101-beep
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Is it reasonable to use flexbox or css grid in place of other things such as floats or position divs etc? I like the technologies but find myself preferring them when maybe a simple solution would work too.

What is the convention on naming class and sub-classes with sass? I've tried to use class="card", class="card-inner" and card { &-inner { ..... } } which works well but struggle with names that would be under those. Is there a better way?

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    Hello SB101-BEEP, congratulations for your solution

    I'll give you my opinion about the easiest way to build this component, although you can do it using flex I prefer grid because is so quick.

    For example to build this component that has 2 column with grid in 3 properties you define its layout (I ever choose grid for layout and flex for blocks).

    Built it with display: grid grid-template-columns: 1fr 1fr; and the component width max-width: 900px this means that the two divs(column image + column text) inside this container will automatically have 450px each, without need to touch these div properties.

    This is how I did my solution, what you think about it?

    Happy coding!

    Marked as helpful
    3

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