Product preview card component with plain html / css

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Eugene, congratulations for your new solution!

  I did this same projects a month ago, the way you did is working perfectly. I'll say you the way I did mine, just to know an alternative way to build the same solution. There's no right or wrong, the solution needs only to work.

  In this case I've used grid to build the structure with 2 columns and all you need to do is create a main block to hold all the content (you can use <main> to wrap), set its width as max-width: 100px (its the container size) and display: grid / grid-template-column: 1fr 1fr(this means that your component will have two columns with 50% of the container width each thats 500px).

  Then for the column structure, the second column I've used flexbox to the alingment and gap to separate vertically each element.

  👋 I hope this helps you and happy coding!

  1

  ---

  

  P

  Genie 🧞‍♂️•100

  @EugeneCarbadoPosted over 2 years ago

  @correlucas I don't use grid as much as I should but I'll definitely give it a go for the next solution. Thanks a lot for the feedback and the tip Lucas 👍🏾

  1

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @EugeneCarbado You're welcome, is since a month that I'm using Grid, I used to hate grid in the past. Now I like a lots hahaha

  0