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)
Hi @vicrost ,
In most cases you'd want to use
align-items: stretchinstead ofalign-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
Hi vicrost :) Check out this pen. It uses grid, but it accomplishes what you're trying to do.
Thank you. Your method worked exactly how I wanted it to
You could try to add: ‘flex-basis: 0; flex-grow: 1’ to each card