By Stephen Walker

The Recipe

This is a fundamental challenge is that this represents some of the basic functionality of Avada, but if you are new to it might not be “common sense.”

To create a three column layout with the columns being equal width and height do the following:

  1. Add a new three column container. This will take care of equal width and spacing of the columns.
  2. In the column alignment settings of the container, set this to stretch*. This will keep the columns at the same height. You can override this at the column level in the event you need to add a column that you don’t want to have the same height – I would recommend a new container for ease of maintenance. You can also do this using the stretch setting in each column, but then you have to edit each column.

Use the “Stretch” setting either in the container (shown here) or column.

*Note: In the legacy mode (Avada version 6 and older) this was accomplished by setting the content to equal heights.

Column styling

There are several settings to adjust how the column is laid out. In this example I only adjusted the padding – I do this on all columns. You can adjust the gap between the columns using the column spacing or you can set the gap defaults in the Avada Options. The key to maintaining the symmetry you have created is tho make sure the settings are the same in each column. I normally do this by styling one column, cloning it, and then adding the content.

Adjusting the spacing on columns is easy using the design settings.

Demo Area

Donec tempus ligula in urna hendrerit, sit amet ultricies justo rhoncus. Morbi pharetra arcu ut finibus interdum. Ut magna lectus, sagittis eu tempor quis, sagittis ut tortor. Donec tincidunt porttitor lorem eget commodo.

Nunc congue aliquam lacinia. Phasellus sed malesuada mi, sed varius nisl. Nullam sit amet mi risus. Praesent risus nibh, imperdiet at porttitor id, maximus nec nunc. Donec sed facilisis justo, vitae faucibus orci. Nulla ac odio orci.

Nullam sem lectus, finibus at lacinia nec, rhoncus et lorem. Donec blandit erat a libero efficitur gravida. Praesent volutpat diam eros, id commodo ante luctus sed.

Originally published on November 22, 2020

Share this article:


  1. Jason May 21, 2021 at 11:54 am - Reply

    Fantastic, thanks for making this clear, I don’t know why they changed it after all this time!

    • Stephen Walker May 29, 2021 at 11:23 am - Reply

      The changes were do to the flexbox implementation and using the nomenclature that the industry is using.

  2. victornalves567 June 17, 2021 at 8:32 am - Reply

    Thanks! That worked fine!

Leave a Reply


Affiliate Advertisement