Five Column Layouts

The one thing to note about the 5 column option is that it can't create 5 equal columns. This is because our column system is based on a 12 column system. The width the browser is divided into 12 columns. To create a layout, you assign how many of those 12 columns your blocks will take up.

For example, if you want a 3 column layout, the 3 columns will be assigned to span 4 columns each. 12 divided by 4 is 3, so you end up with 3 columns.

12 isn't divisible by 5, so that is why we can't have 5 equally sized columns.

One way to work with this setup is to think of the largest column is a way to emphasize content. 5 columns is a lot of content and it's helpful to call out something as more important than the rest.

However, you can create 5 equal columns using a 1 column.

Here are the settings:

• 1 column
• Full

Add the classes to the column

1. Click on Configure Section #
2. Click on the settings cog
3. Click on the Column Settings
   1. In the the field Col 1 classes, add these classes: d-flex flex-wrap justify-content-around
      • Copy and paste the above classes. They must match exactly or it won't work, including the spaces separating them

• Optional: under Style and then Positioning select align items center
• Then add 5 blocks to the 1 column and they will distribute evenly in a single row