Simple Responsive 5 Column Layout with Flex

by | Jun 2, 2017 | Divi Tips | 7 comments

NOTE: This page is best viewed on Desktop.

Create a quick 5 column row using Flex. You can also edit this for any number of columns you need.

There’s plenty of ways to achieve a 5 column layout but let’s not under estimate the simplicity of using Flex. I know it can be intimidating at first as there are so many possibilities with Flex so I’m going to keep this as simple as possible and achieve a 5 column row with as little coding as possible. We’ll do this in a way that will have you knocking out layouts in the time it takes you to realise you forgot to get a new roll of paper before you started going.

We’ll start things off by adding a standard section, with one column and remember, if your site implodes, it wasn’t my fault. 

Let’s do this…

So, once you’ve added your section and single column, the next thing to do is add a code module into the column.
Then add a new standard section, containing the 5 modules you’re going to use in your layout.

Next up, is our custom classes.

We’re going to give our main section row’s column (that’s the second one you created) a class.

To do this, open up the Row Settings by clicking the hamburger icon on the Row menu. Click the ‘Advanced’ tab and enter a class into the Column CSS Class input box as I have done in the picture on the left. Remember you don’t need to add a . preceding the class name, just enter the name.

I’m using the easy to remember, ‘five-columns’

Module custom classes.

Now we need to give our modules a custom class too. Select the hamburger icon for each module and in the ‘Advanced’ tab enter a class name in the ‘Custom Class’ inut box. Think of something easy to remember. I am using the very simple and easy to remember ‘column-items’ as in the picture on the left.

Click on save and close for each module as you do this.

Our code module’s custom CSS.

Now we can start to get things done and we haven’t even stopped for coffee yet. Have we pupils?
You’ll get a brown star if you got this far without coffee.., if you made one before you started, that doesn’t count.

I digress…

Open up your code module by clicking on it’s hamburger icon then input the following code.

 

<style>
.five-columns { 
  display: flex;
  flex-flow: row wrap;
}
</style>

 

Obviously, the display property needs to be set as flex otherwise the rest won’t work.
The flex-flow property is short hand and defines both the flex-direction and flex-wrap properties.
What we have done, is to kindly ask Mr Flex to wake the f**k up and set our flex direction to Row, and Wrap our items. We want them to wrap for responsiveness; 5 columns on a 360px screen will look ridiculous right?

What we’ve got so far… doesn’t look so great does it?

As you can see in the image on the left not much has happened and it looks pretty… well not pretty at all quite frankly.
We need some more styling, this time to our .column-item class which, if you were paying attention, you added to your modules.

So head back into the code module and lets add some more CSS.

 

<style>
.five-columns {
  display: flex;
  flex-flow: row wrap;
}
.column-item {
  flex-basis: 20%;
}
</style>

 

The flex-basis property will define the number of columns we want. 50% would be 2 columns, 33% would be 3 columns.
In our case, we want five columns so we use 20% for our flex-basis which means each module will take up one fifth of the available space in our flex container.

What we’ve got now… looking better already, but that last blurb is a bit skew whiff. 

Divi has a setting that tells the last item to have a bottom-margin of 0. We could fix this by defining a position in our flex container with the align-items property and a value of flex-start. If we do that however, it will mess up our responsiveness so instead, we’ll just set our own margin for all the items/blurbs.

Let’s call it 0.5% to give us a little spacing between each blurb on all sides. We’ll need to add an !important declaration to the margin to overrule Divi’s default margin on the last item.
Also, 0.5% margin will add 1% to the width of our items/blurbs so we need to subtract 1% from our flex-basis taking it down from 20% to 19% or our 5 blurbs will no longer fit inside the container.

Still with me pupil? Keep going, the finish line is in sight.

When we reduce the width of the viewport/browser window, our blurbs will reduce in size also but only up to the point where they no longer fit inside our columns and will wrap to another row.
We want to control when this happens so we’ll give our blurbs a minimum width of say 240px.
Now when the viewport is reduced, our blurbs will only shrink to 240px and then the last blurb in the row will move/wrap to another row, when we reduce the viewport width further, the same thing will happen again and the next Blurb will wrap to the second row.
This will look a little odd, so we can force the blurb or blurbs in the second row fill the entire width of the second row by setting the flex-grow property to 1.

While we’re at it, we may as well add some padding to our blurbs instead of having to add padding to each module. 15px should do nicely.

And finally…

Our code module content should now look something like this:

 

<style>
.five-columns {
  display: flex;
  flex-flow: row wrap;
}
.column-item {
  flex-basis: 19%;
  flex-grow: 1;
  margin: 0.5% !important;
  min-width: 240px;
  padding: 15px;
}
</style>

 

The last thing to do is to copy all the CSS from the Code Module between the <style></style> tags and paste the code into your Theme Options or child theme stylesheet. Now go get your coffee, you earned yourself a gold star for pulling this one off. Well done you!

You can see the final result below; resize the browser width to see the responsive awesomeness in action!

Blurb Module

The Plums we’re brown and wrinkly, but that didn’t stop Colin from eating them; Colin thought the plums were walnuts.

Blurb Module

The Plums we’re brown and wrinkly, but that didn’t stop Colin from eating them; Colin thought the plums were walnuts.

Blurb Module

The Plums we’re brown and wrinkly, but that didn’t stop Colin from eating them; Colin thought the plums were walnuts.

Blurb Module

The Plums we’re brown and wrinkly, but that didn’t stop Colin from eating them; Colin thought the plums were walnuts.

Blurb Module

The Plums we’re brown and wrinkly, but that didn’t stop Colin from eating them; Colin thought the plums were walnuts.

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.

1 + 13 =