Apply Equal Height by Row in Loop Grids

[micmiller-apptio]

Prerequisites

• I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
• The feature is still missing in the latest stable version of Elementor ( Elementor Pro )

What problem is your feature request going to solve? Please describe.

I am migrating the post loops on our site from the Posts widget using Ele Custom Skins Loop templates to Loop Grids with Loop Item templates. With Posts + Ele Custom Skins, equal height was applied on a row by row basis so if there was an item with longer content, the extra height of that item was constrained to other items in the same row without making every item in the grid as tall as the tallest item.

Describe the solution you'd like

I would like to have either an option to apply equal height by row, or have that be the standard behavior. Tiles with less content can end up with a lot of extra white space if everything in the grid shares the height of the tallest item in the grid. This impact is lessened and tile layouts look better when shorter items expand to only the height of the tallest item in their row.

Describe alternatives you've considered

No response

Additional context

No response

[micmiller-apptio]

Updating my own request, I am able to get the functionality I want by disabling the Equal Height option in my loop grids and adding CSS to set the height of wrapper elements within my loop items to 100%. The flex model automatically sets the height of the parent containers within a row to the height of the tallest element in that row. It would be nice if Elementor used the Equal Height setting to apply 100% height to child wrappers instead of my needing to create a custom class and CSS to do it.

[mcxjc]

Hi can you show how you did it because i've been searching high and low for this solution

[micmiller-apptio]

What wrapper elements you target with CSS will depend on which layout model you are using:

• Columns and Section without DOM Optimization
• Columns and Sections with DOM Optimization
• Containers

In the Loop Grid Widget I make sure that equal height is disabled, and add a custom class name like my-eq-height-grid
This first example is what I added to the global site CSS for sections and columns with DOM Optimization on (I gave each selector it's own line here for readability):

/*Force Loop Grid tiles to fill space of parent container to achieve equal height */
.my-eq-height-grid .e-loop-item{
    height:100%;
}
.my-eq-height-grid .e-loop-item>section{
    height:100%;
}
my-eq-height-grid .e-loop-item>section>.elementor-container{
    height:100%;
}
.my-eq-height-grid .e-loop-item>section>.elementor-container>.elementor-column{
    height:100%;
}

For Columns and Sections with DOM Optimization off, the CSS needs to target the section-wrap and elementor-row classes like so:

/*Force Loop Grid tiles to fill space of parent container to achieve equal height */
.my-eq-height-grid .e-loop-item>.elementor-section-wrap{
    height:100%;
}
.my-eq-height-grid .e-loop-item>.elementor-section-wrap>section{
    height:100%;
}
.my-eq-height-grid .e-loop-item>.elementor-section-wrap>section>.elementor-container{
    height:100%;
}
.my-eq-height-grid .e-loop-item>.elementor-section-wrap>section>.elementor-container>.elementor-row{
    height:100%;
}

[mcxjc]

It works! thank you so much!

[maxms]

If using containers, this worked for me on the loop grid:

/*Force Loop Grid tiles to fill space of parent container to achieve equal height */
.my-eq-height-grid .e-loop-item {
    height: 100%;
}

.my-eq-height-grid .e-loop-item>.elementor-element {
    height: 100%;
}