fbpx

Tutorial

Listing Grid Equal Heights

Uses Plugins

Elementor PRO
Crocoblock JetEngine

Description

A common question with JetEngine Listing Grids is “How do I make equal height items”, followed by “How do I align the last Widget to the bottom”.

This tutorial explains the structure and what I think is the easiest solution

1

Introduction

The JetEngine Listing Grid Widget has an Equal Height option. However, it is often misunderstood what it actually does

When enabled, it makes the height of all items on a row the same by stretching the top section of the Listing layout. It does not stretch the inner contents (The Column).

So if you apply a border, box shadow or anything to the column, they will show as different heights. Applying these to the Section they will look like the same height. However, the inner contents are still not stretched.

I will demonstrate this by putting a black border on the Section and a red border on the Column.

I will then show you my simple CSS classes to resolve the issue, with an option to align the last Widget to the bottom.

In the explanation part of the video, I will work through to explain the problem and solutions.

 

2

Listing Item

For the purpose of this tutorial, I will assume that you have already created a Listing layout and placed a Listing Grid on a page.

  1. Edit the Listing with Elementor
  2. Select the first Section
  3. On the Advanced tab, Add the classes "listing-equal-height listing-last-to-bottom"
3

Listing Grid

In the Elementor Editor, Select the Listing Grid.

On the "Content" tab , set "Equal columns height" to "Yes"

4

Site Settings CSS

  1. Edit Site Settings
  2. In Custom CSS, copy the CSS below and Paste it there.

Code (click to copy)

CSS (css)

Paste the following code into Site Settings -> Custom CSS

.listing-equal-height > .elementor-container {
    height: 100%;
}

.listing-equal-height > .elementor-container .elementor-widget-wrap {
    height: 100%;
}

.listing-equal-height > .elementor-container .elementor-column-wrap{
    flex-direction: column;
}
.listing-equal-height > .elementor-container .elementor-column-wrap .elementor-widget:last-of-type{
    margin-top: auto;
}

/* Last Widget Alignment */
.listing-last-to-bottom > .elementor-container .elementor-widget-wrap{
    flex-direction: column;
}
.listing-last-to-bottom > .elementor-container .elementor-widget:last-of-type{
    margin-top: auto;
}