DEV Community


Posted on

CSS Flexbox : Creating fixed size Cards

I've been stuck on this problem for a couple of days now. I've watched countless videos but I can't seem to find the solution that I wanted. Here is the problem.


What I want to do is create cards of equal height and width and of three columns each row. The images on I place on the cards should scale in size automatically to the card and the text should wrap automatically based on the width of the card. Now though, the cards change size based on the image or the length of text. How can I fix this?

Top comments (4)

joellau profile image
Joel Lau

Hi @vicrost ,

In most cases you'd want to use align-items: stretch instead of align-items: flex-end (what I'm assuming you're using) to allow items to take up the full height of your card.

I made a small pen to show how this might work:

adrianmarkperea profile image
Adrian Perea

Hi vicrost :) Check out this pen. It uses grid, but it accomplishes what you're trying to do.

vicrost profile image

Thank you. Your method worked exactly how I wanted it to

anduser96 profile image
Andrei Gatej

You could try to add: ‘flex-basis: 0; flex-grow: 1’ to each card