DEV Community

vicrost
vicrost

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.

Screenshot

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)

Collapse
 
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:
codepen.io/joellau/pen/YzyJRYb

Collapse
 
adrianmarkperea profile image
Adrian Perea

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

Collapse
 
vicrost profile image
vicrost

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

Collapse
 
anduser96 profile image
Andrei Gatej

You could try to add: โ€˜flex-basis: 0; flex-grow: 1โ€™ to each card