How to use equal height of wraps?

Above version 26.0

In version 26.0, we introduced many changes, including flexbox positioning. It gives many possibilities for aligning content on your website, just like stretching wraps to have equal height. You can learn more about it on the video tutorial below:

Versions below 26.0

The equal height of wraps is used to position elements on top, middle, or bottom in wraps. We will be working with the example shown below. This is a section that contains two wraps. You can have more wraps, each of them has a separate setting of the vertical align option, but we will get back to that later.

equal height wraps example
First, we need to create a new section, then insert two (or more) wraps inside it. You can then add any items into those wraps. For this example, we will use a column and an image.
section edit options where
Edit the section, to set the equal height of wraps option inside the section options.
section edit equal height wraps

The last thing you need to do is to edit each of the wraps, and set the vertical align option inside.
You can choose from top, middle or bottom alignment.

wrap options vertical align option