We often find ourselves wanting to make a two row grid. For example, a row of blurbs with a row of buttons beneath them or a row of images followed by a row of buttons. Here is an example using images and buttons –

This all looks very neat and tidy. One way of achieving this is to use a single row of three columns and add an image and button to each column. One great thing about this design is that it is responsive and works, unchanged, on desktop and mobile. Divi re-arranges rows from left to right by column. So, having both the image and button in the same column means they stay in the same relative position on mobile. We get an image/button/image/button/image/button single column layout on mobile. Here is what this design looks like in the Divi editor –

This works fine unless the modules in the first row are different in height. When this happens the buttons beneath them will not be aligned horizontally. Here is what this looks like with a smaller image in the first column –

You may or may not think misalignment of these buttons is a problem but, to us, this looks untidy.

Now, we could crop our images to the same size but sometimes that’s not convenient and, though we use images here, we want to consider the more general case as well. We want to use any module type in the first ‘row’, not just images. In fact, just about any Divi module that contains text, for example, will cause this issue. These text based modules are very unlikely to be the same height because the height is usually determined by the text and they will not contain the same text. 

In fact, the misalignemnt of the buttons in the second row will happen regardless of what is in the first row, so long as the height of those modules is different. To think of this a different way, having each image/button pair in the same column means that the position of the button depends on the height of the image (or whatever module we are using). So this design will only produce horizontally aligned buttons when the modules in the first set of modules are of equal height.

If we want to be sure the buttons will align horizontally, the obvious solution is to change the design to use two rows rather than one. Here is what this looks like –

And here is the new design –

This solves the alignment issue. The modules in the second row will always be horizontally aligned because they are in a separate row. That’s what rows do – they ‘re-align’ or ‘re-start’ the columns contained within them.

The problem with this design though is that it does not give us what we want on mobile. This is because, when Divi re-arranges the modules for mobile, we get an image/image/image/button/button/button pattern. The modules columns are ordered from left to right, by row.

If we want to preserve the horizontal alignment of the modules in the second row of the grid, it looks as though we cannot do this without introducing a second design, a single column layout, for mobile.

So, we could use the above design to achieve horizontal alignment of the second row, even where the first row of modules have different heights, but this will not work on mobile and we would need to introduce a second, single column design for mobile such as this –

The thing is, we don’t like having multiple designs for desktop and mobile. Even the most careful developer can sometimes modify one version and forget to modify the other. We really want a better solution than using two designs if we can.

Using One Design

The first design we tried, the single row design, gave us the desired layout on mobile. Here it is again –

But it does not work when the modules in the first row are of different heights, because the button position depends on the height of the modules above them, like this –

However, it’s a good place to start because, if we can overcome this issue, we already have the correct behaviour in respect of the responsiveness. Given a choice between solving the problem of aligning a responsive design or making responsive an aligned design, we think it is easier to start with a responsive design and solve the alignment problem with some CSS. So that is what we will do.

Equalize Column Heights

The first issue to address can be seen using Google Inspect. We use Google Inspect to take a look at how Divi organises the columns in the one row design above. Google Inspect is incredibly useful. It is on the right mouse button, just select Inspect. We use it here to look at the situation where we have modules of different heights in the first row. The first issue is that the column height is, by default, determined by the content. Here is what Inspect shows for the first column –

And here is the second column highlighted using Inspect –

In fact, the columns themselves are different heights. This stops us from easily moving the misaligned button around. There is no spare space to allow this. As it happens, this is easy to solve – just switch on Equalize Column Heights in Divi Row Module -> Settings -> Design.

We can see what this does –

This appears to have done nothing but, using Inspect shows that the columns are all now the same height –

Though the button in the first column is positioned immediately beneath the image module, at least we have now created the space to allow us to move the button down, within its parent column. What we need is some way of aligning the button with the bottom of the column instead of with the bottom of the image.

Really Useful Flex

Flex is really useful 🙂 We are going to use it to distribute the objects in each column so they are positioned at the top and bottom. First though, Flex is a little bit of CSS magic so we need to write a CSS class to apply it to our columns.

Because we are going to use CSS, we recommend using a child theme for this. There are many good articles on the internet about creating child themes. You can, of course, either use a CSS plugin or put your CSS into Divi->Theme Options->Custom CSS instead.

Here is the CSS we need. Add it to your child theme style sheet (or make it available by some other method such as by adding it to Custom CSS in Divi Options) then just add the class name bottom-align-buttons to Row Module Settings ->Advanced->CSS Class.

.bottom-align-buttons .et_pb_column 
{ 
    display:flex; 
    flex-direction:column; 
    justify-content:space-between;
}

How does this work? Well, first of all, it is applied to each column of the row, the .et_pb_column does that for us. Next, the code tells the column to behave like a flex container by setting the display to flex. Then, because the default flex direction is row, we set it to column instead. This gets Flex to organise the modules in the container (the column) in a column. Finally, we use justify-content to distribute the image and button with an equal distance between them. Because there are only two objects in the column, the effect is that they will be positioned at the start and end of the column. Which is exactly what we want!

Here is what this should produce  –

So, we have managed to horizontally align the second row of buttons using a little CSS and Flex. And we have done this with a design that will work both on desktop and mobile.  

If this hasn’t worked for you, make sure you have Equalize Column Heights switched on 🙂

Some Limitations With This Approach

If you use more than two modules per column, the alignment might not be perfect. The modules are distributed within the column, not aligned with each other. The Flex code is distributes them with same amount of space between each module in the column. Also, if the modules in the ‘second row’ are different height, they will be bottom aligned, not top aligned.

Other Things to Try

Though the example here uses images and buttons, the CSS is not specific to any particular module type. In fact, the modules in the ‘first row’ don’t even need to be the same type.

If you found our blog article useful, why not subscribe? Get all of our articles and tutorials delivered direct to your inbox!

You have Successfully Subscribed!