How to manage different size of contents in a card, keeping the card size same?

Sample Design

  • This looks like a CSS question perhaps but have you looked at flexbox? With it you can ensure the boxes are all the same height and then I would bottom align the CTA button. – deejbee Sep 3 '19 at 13:43
  • I can be wrong but flexbox will not show all cards with same height without javascript. I suggest to use the grid and I also suggest you make this question at Stack Overflow. – Rafael Perozin Sep 3 '19 at 16:10
  • I mean from a design perspective, not a CSS question. I got some inconsistencies when the real data is put in this design. I want to have the box to be the same size. – Jayadeep Sep 4 '19 at 6:57

You can achieve this with using css flexbox. The align-items: stretch is the property that should be applied to the container of the Cards.

See the align-items explanation here for more info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

This will make all Cards equal to the card with the greatest height. Then you can make sure all of the “mapped” buttons are aligned across the cards.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.