Prevent grid item from vertical stretching

[Helena_G]

Hi, Kirupa members,

I need your help. Tried so many scenarios, nothing seems working.
On this website https://fashionista-kirupa.netlify.app/ I have a lot of asymmetrical cards, which CSS makes symmetrical

As you can see on this screenshot , the footer of the card 4 (Louis Vuitton) is higher. Even, if it has the same height in CSS.

How to prevent it from stretching ? Could you, please, help.

Thank you very much in advance.

UPDATE: The solution that I’ve found is - to give the ‘max-hight’ to the card 4.
But maybe you know a better solution which would be more appropriate for this case.

Thank you very much in advance.

[kirupa]

Another solution might be to set the height on .card__normal to fit-content:

.card__normal {
    max-width: 480px;
    border: 1px solid #000;
    height: fit-content;
}

When I did that, I see the fourth card’s height being shortened to accommodate the shorter height of the content:

[Helena_G]

@kirupa Thank you very much. This is the best solution for me.
As I have a lot of cards on the site and they all have different height, it’s very time consuming and challenging to calculate the max-height each time.
This solution will save me a lot of time.
Thank you