Creating a simple grid layout of modules using CSS Flex

by | May 29, 2017 | Divi Tips | 0 comments

Following on from my tutorial on creating a grid layout with CSS Grid, here’s a similar one using Flex.

I already have a tutorial about using flex to align modules to the bottom of columns and there are countless Flex tutorials on the internet, I’m sure some in the Divi community so I will keep this as short as possible.

We’ll do the same as the Grid tutorial and create a 3 x 3 grid, this time we’ll just use a grid of images.

Let’s get stuck in and create a 3x3 Flex grid. 

For our layout, we’re going to be using image modules. Now if you can just remember that if you break your website, it’s not my fault, then well get along just fine.

First up, we’ll add a standard section with a single column. and add one image module.

Add a Standard Section and choose the single column layout.

Then enter the Row Settings and select the Design Tab. Scroll to the bottom and insert 10px in each of the boxes for the Column Padding. Click the Advanced Settings Tab and scroll down to the Column Main Element input box and enter the following:

 

display: flex;
flex-flow: row wrap;

 

This defines our column as the Flex container and and sets the flex direction to Row and the flex wrap to wrap using the shorter flex-flow property. This makes our content flow from left to right and push the content to another row when it runs out of space.

Now go ahead and add the first Image Module to the Column. 

We’re going to save our Image Module as a global item. if you don’t know how or why we are doing this, please have a look at the toggle module on the right hand side of this page then hurry back and continue reading.

After we’ve saved our image module as a global item we’ll open up the module’s settings and click the Selective Sync Icon for the Image URL field in the General Tab and the Alt and Title fields in the Advanced Settings Tab.

Defining our Flex properties.

In the Advanced Settings Tab of our image module, give the image a unique class in the CSS Class input box – you can use whatever you like but I’ve used flex-item. Scroll down to the Main Element input box and enter the following.

 

flex-grow: 1;
padding: 10px;
align-items: center;
flex-basis: 33%;

 

The Flex Grow property defines how much the item will grow relative to the rest of the flexible items.
We have 10px padding on our flex container so by setting 10px padding on our items we have a total of 20px around each image.
The align items property is used because the default setting is ‘stretch’. By changing it to flex-start, flex-end, or center we will prevent our images from being stretched.

The flex basis property defines our columns.

Because we want 3 columns we’ve set the percentage to 33%. If you wanted four columns you would set this to 25%, or for 5 columns 20% and so on.

We can also use the flex basis property in our media queries to change the number of columns at specific breakpoints. You would have to do this in your styl- sheet or in the Theme Options custom CSS box which is why we added a class to our image module.

A typical media query might look like this giving us two columns:

 

@media all and (max-width: 980px) {
    .flex-item {
        flex-basis: 50%;;
    }
}

And for setting a single column:

 

@media all and (max-width: 479px) {
    .flex-item {
        flex-basis: 100%;;
    }
}

The Final Result…

Now we’ll simply duplicate our Global Image Module so that we have 9 items and change the image for each module.
As you can see below, we have nice simple responsive grid using Flex.

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.

4 + 12 =