How do I make Gutenberg Blocks and Premium Blocks columns the same height? This is a very common question for Gutenberg users while creating Premium Blocks for Gutenberg container to achieve a well-balanced and good-looking design in terms of UI/UX.

Today, we’ll show how you can achieve that using the Gutenberg Equal Height feature in Premium Blocks for Gutenberg. It’s totally FREE and easy to use.

Requirements:

• You will need Premium Blocks free plugin installed and activated on your website.
• Also, make sure that this Feature is enabled in Premium Blocks Settings.

How to Enable Equal Height Feature for Gutenberg?

Go to WP Dashboard -> Premium Blocks -> Features tab.

What Are The Options Available in the Equal Height Feature?

The equal height feature in Premium Addons can be applied on:

• Blocks: Apply equal height feature on specific blocks.
• Block Elements: Apply equal height feature on a specific element inside Gutenberg Block.

How to Apply Equal Height on Gutenberg Block?

In this example, we have Premium Blocks for Gutenberg Container with four Premium Blocks Icon Box Blocks. Each block is in a different column, each column has a different height. Now, all you need to do to make the columns have the same height is to navigate to the parent container > Advanced tab > Equal Height > Enable Equal Height option.

• Blocks: Select the target Blocks. In our case, it’s Premium Icon Box.
• Enable Equal Height on: Select the devices you want to apply the Equal Height option on.

How to Apply Equal Height On Gutenberg Block Elements?

Basically, the blocks elements option is used when you need to apply Equal Height on a specific element in your block. In this case, we use the blocks elements option to apply the equal height feature on it. For more clarification please check the below example.

Suppose, we need to apply the equal height option on a specific element inside our block. We have a Gutenberg Icon Box block where we’ve three columns side-by-side. You want to make them at the same height (Equal Height).

How to Apply Equal Height In Gutenberg Using Blocks Elements option?

Navigate to parent container > Advanced tab > Equal Height > Enable Equal Height option:

• Blocks: Select the target Blocks. In our case, it’s Premium Icon Box.
• Blocks Elements: select the element to apply Equal Height on it.
• Enable Equal Height on: Select the devices you want to apply the Equal Height option on.