Align Modules to the Bottom of Columns in Divi

by | May 12, 2017 | Divi Tips | 3 comments

NOTE: This page is best viewed on Desktop.

Regular Divi Columns with the last module set to fill the remaining space in column two, and the last module in column three pushed to the bottom.

Pupils, you can pretty much copy and paste the code below without using an ounce of brain power, however, pupils will only get a brown star for such blatant laziness.

This grid below uses display:flex; in the columns to align the last module to the bottom of the column.
Equalize Column Heights is on in the Row Settings.

Fill the space as in Column 2 below.

In the Custom CSS for the Column add:
display: flex;
flex-flow: column;

In the Custom CSS of the last Module in the Column add:
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;

To align the content bottom or top change justify-content to:
justify-content: flex-start; or
justify-content: flex-end;

Force the Module to the bottom as in Column 3 below.

In the Custom CSS for the Column add:
display: flex;
flex-flow: column;

In the Custom CSS of the last Module in the Column add:
margin-top: auto;

If using a button you can centre it by using
margin-top: auto;
align-items:center;

Call to Action

Either the Banana was Orange or the Orange was long. Colin didn’t know as he’d never seen a Banana.

Blurb Module

Either the Banana was Orange or the Orange was long. Colin didn’t know as he’d never seen a Banana.

Get in Touch

Get in touch if you need help or information about any of my plugins, tutorials, web design or hosting solutions.

I am always looking for more ideas for articles and plugins so if you have an idea you want to share, feel free to get in touch.

Please remember to white-list my email address
plugins@xn--hdworm-pua.com if you’re expecting a reply.

15 + 7 =