Loop Grid how to get Equal height cell and contents

I have done a similar video previously for JetEngine Listing Grid. Today I got asked if the same thing can be achieved with Elementor Loop Grid.

HTML and CSS are the same things, regardless of what they are created with, so the answer is normally YES.

One extra consideration with Elementor is the extra wrappers it puts around containers and widgets. These need to be taken into account when creating CSS.

Although the Loop Grid does have an "Equal Heights" switch, it does not take into account the template contents.

This video shows how to target and align the last element to the bottom

[mukeshwarsingh]

Reminder: If you want to align other element of the Grid Loop, you have to change the code. For instance, I particularly have problems with Images, where some images are big and others are small, so I wanted to Align according to heading, so all headings are aligned irrespective of image size.

So, I changed the code to -

{
margin-top: auto;
}

Explanation. I have three elements, Image, Title and Button. I wanted to align by Title, so I put the "nth-child" as 2. You can use this code and change the number to the element and Voila!

[CamelliaJaponica]

I tried your solution but the whole container is pushed to the bottom leaving unequal blank spaces on the top of the loop items as each of them has a different amount of content inside. I tried setting the vertical arrangement of the container as Top but it doesn't help. Have you come crossed anything like that? Thanks for the video anyway!

[mihaiciobanu]

Great video, i was looking for this. 👍Question: how can we set the image to be same size even when the dimensions are different, same happens in your video. Thanks!

[gamipresscordial]

You didn't add the codes you used. Can you Please add the codes? Regards.