3-column preview card component solution with HTML/CSS only

Community feedback

• 

  P

  Bekar Shekiladze•550

  @beqarionPosted over 1 year ago

  Thanks! buttons are little bit fat though😆

  Well I used grid 3 places there.

  • main element

  Just for centering. I could use flexbox but I feel comfortable with grid and did so. Allmost same amount of code would be required for flex too.

  • cards container

  When I have to change elements orientation I try to always use grid, dont like flexbox flex-direction, because It feels littlebit complex for me if it needs further adjustments

  • In Card itself on widescreen

  Here I had biggest reason using grid for controlling height of elements in card: Because the card has fixed height (min-height: 500px), if elements inside it had auto height, most likely there would be leftover white space at the end of the card component. In Figma design, card at the bottom doesn't have empty space. the only element in there has opportunity to grow is the card-text element. So I set grid-template-rows: auto auto 1fr auto .

  Also, at this time I'm more used to grid than flex so I don't really remember more complex flex commands like flex-grow and etc. I use flex only for centering or layouts like space-between.

  1
• 

  ADABetti•30

  @ADABettiPosted over 1 year ago

  Your solution is identical to the task! Congrats! I would like to know if there is a specific reason why you used grid instead of flex-box.

  1