# Prevent grid item from vertical stretching

**URL:** <https://forum.kirupa.com/t/prevent-grid-item-from-vertical-stretching/652920>\
**Category:** web dev\
**Created:** [August 2, 2022, 10:56pm UTC](https://forum.kirupa.com/t/prevent-grid-item-from-vertical-stretching/652920 "2022-08-02T22:56:58Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Post date:** [August 2, 2022, 10:56pm UTC](https://forum.kirupa.com/t/prevent-grid-item-from-vertical-stretching/652920/1 "2022-08-02T22:56:58Z")

</div>

Hi, Kirupa members,

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

 ![kirupa-question](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/f/1/f1943026f48bbac8b734944da67d0b33bb874d0b.jpeg)

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._

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 3, 2022, 7:49pm UTC](https://forum.kirupa.com/t/prevent-grid-item-from-vertical-stretching/652920/2 "2022-08-03T19:49:35Z")

</div>

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

```auto
.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:

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/1/2/126d0c53bd52f6d5dce15e12b0f751c5d218c29b.jpeg)

---

<div class="post-metadata">

**Author:** ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Post date:** [August 3, 2022, 10:12pm UTC](https://forum.kirupa.com/t/prevent-grid-item-from-vertical-stretching/652920/3 "2022-08-03T22:12:14Z")

</div>

@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 🙂