WordPress: Vertically Justify Content in Boxes of Equal Height

A regular layout technique in web design is a row of boxes with similar content. Ideally, the content vertically fills the boxes equally.

One way of creating this in WordPress is a Columns block. In its simplest form, the boxes look like the image below. The boxes (Column blocks in WordPress terms) are not the same height.

We can make the box heights the same and justify content vertically with the core WordPress Columns block and Stack blocks.

The Set Up

Nest a Stack block in each column as shown below. Put your content blocks inside the Stack block. In this example, each Column block has a background color, and the content inside those blocks is a heading, paragraph, group with a list, paragraph, and button. But the content can be whatever you want.

Columns block
    Column block
        Stack block
            Headline block
            Paragraph block
            Group block
                List
            Paragraph block
            Buttons block
    Column block
        Stack block
            Headline block
            Paragraph block
            Group block
                List
            Paragraph block
            Buttons block   

The example above shows only two of the four columns of this example.

Columns block Settings: Vertical Alignment Set to None

To make all the columns the same height, set the Columns block Vertical Alignment setting to none. You might have to click on the currently selected setting to turn that setting off.

But this leaves another design problem. The columns are the same size, but only the one with the most content fills the space. The other columns have space at the bottom.

Stack Block Justifies Content Vertically

The Stack block can vertically justify its content to fill the vertical space of the column. Put all the content for each column in a Stack block with these settings:

• Vertical Alignment: Space between
• Minimum Height: 100%

The result looks like this:

Odd Spacing with Content of Significantly Different Heights

I found this technique produces odd spacing when the content of each column has significantly different heights. In the example below, the content of each column is nested like this:

Stack block
    Headline block
    Paragraph block
    List block

Each list has a different number of items, so they are different heights. The spacing between the inner blocks doesn’t work very well.

To fix the spacing, you can change the height of the content blocks manually. In this case, increasing the top margins of each list item improves the spacing.

Conclusion

You can vertically justify content in a row of boxes with WordPress core blocks. Use a Columns block for the boxes. Put box content in Stack blocks with Vertical alignment set to “Space between” and Minimum Height set to “100%”.