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, 2019 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. Sep 3, 2019 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, 2019 at 6:57

1 Answer 1


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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