When you create multi-column layouts in the WordPress block editor, unequal column heights can break the visual balance of your page. Without a dedicated tool, you would need to write custom CSS to force columns to the same height.
The Equal Height feature in Nexter Blocks solves this. It lets you fix equal column height in WordPress by targeting a CSS class on the element causing the size difference, with no custom code required. A similar Equal Height feature is also available in The Plus Addons for Elementor for Elementor users.
Best Used For:
- Blog post listing layouts where post titles or excerpts vary in length across cards
- Pricing table sections where each plan lists a different number of features
- Service or info card sections built with the Nexter Blocks Container block in Gutenberg
For more layout precision alongside Equal Height, the Spacer block lets you add specific vertical or horizontal gaps between blocks for fine-tuned spacing.
Required Setup
- Make sure the default WordPress Block editor is active.
- You need to have the Nexter Blocks plugin installed and activated.
- Make sure the Equal Column Height extension is activated: go to Nexter → Blocks and search for Equal Column Height to activate it.
- You have to use a Nexter Blocks parent container.
Why It Matters
The WordPress block editor has improved significantly in recent versions, offering a capable layout system for building multi-column pages without a separate page builder. Even so, making columns equal in height is not part of the core Gutenberg feature set. When column content varies in length, cards and containers in the same row end up at different heights, which breaks the visual alignment of your layout. The Equal Height feature fixes this by letting you target a CSS class on the element causing the height difference, with no custom CSS required.
What You Get
- An Equal Height toggle under Advanced › Nexter: Equal Height on any parent container
- An Enter Unique Class field that targets one or more CSS classes to equalize
- Support for multiple comma-separated classes in a single Equal Height setup
Benefits
- No custom CSS – equal heights are set from a settings field, not a stylesheet.
- Works on any child element – because it targets a CSS class rather than a fixed block type, it can equalize titles, descriptions, or whole cards, individually or together.
- Reusable across block types – the same technique fixes uneven heights in the Post Listing block, the Pricing Table block, or any custom layout of Container blocks.
Capabilities
- Single-class targeting – equalize one element (for example, all post titles) by its CSS class.
- Multi-class targeting – equalize several elements independently (for example, titles and descriptions separately) by entering multiple classes separated by commas.
- Live preview – the Apply Equal Height button previews the result directly in the editor before you save.
How to Activate the Equal Height Extension
Go to Nexter → Blocks, search for the block name, and turn on the toggle.
How to Use It
To use the Equal Height option in Nexter Blocks, select the parent container that wraps your columns, such as the Container block. The Equal Height option is not available on individual child elements; it must be set on the parent container.
Select the parent container and go to Advanced > Nexter: Equal Height > Equal Height and turn on the toggle.
In the Enter Unique Class field, enter the CSS class of the element causing the unequal height. All elements sharing that class inside the container will adjust to the same height.
Note: To use this method, you have to use the browser inspect element tools, so familiarity with the browser dev tools would be an added advantage.
Here is how this process works. To identify the correct CSS class, use your browser’s Inspect Element tool to find the element creating the height difference, or its parent container.
Once you have identified the element, copy its CSS class from the Inspect panel and paste it into the Enter Unique Class field.
Add a period (.) in front of the class name. Then click Apply Equal Height to preview the result in the editor.
Note: You can add the selected element’s parent classes as well to make it more specific.
Here is an example using two blockquotes placed side by side. They have uneven height because their content differs in length. Right-click on the element causing the height issue and select Inspect, from the WordPress editor (backend) or from the published page (frontend). Find the class name in the HTML and copy it, then select the parent container and repeat the Advanced > Nexter: Equal Height steps above.
Click Update to save your changes. The Apply Equal Height button only previews the result in the editor and does not save it.
Use Cases
Fixing Equal Height for a WordPress Blog Post Listing Block
In this example, 4 blog posts appear in 2 rows of 2 items, but the post item heights are uneven. The Post Listing block is where you will most often encounter this issue. The difference in post title height is causing the layout issue. Right-click on the title element and select Inspect to find its class name; in this example it is tpgb-post-title.
Note: As you can see in the example, a div can have multiple classes. You can use multiple classes or any single class to target the element.
Since this is a single block containing all elements, select the Post Listing block, go to Advanced > Nexter: Equal Height > Equal Height, turn on the toggle, and paste the class name with a period (.) in front, like .tpgb-post-title, into the Enter Unique Class field. Click Apply Equal Height to preview.
All post titles are now the same height, which aligns the items in each row of the post listing.
Fixing Equal Height for a WordPress Pricing Table Block
In this example, a pricing table has 3 plans, each listing a different number of features, so the plan cards are uneven in height. The Pricing Table block is a common place where this issue appears. Right-click on the features section, open Inspect Element, and copy the parent container’s class name; in this example it is pricing-content-wrap.
Since the pricing plan blocks sit inside a Container block, select the main container, go to Advanced > Nexter: Equal Height > Equal Height, turn on the toggle, and paste the class name with a period (.) in front, like .pricing-content-wrap, into the Enter Unique Class field. Click Apply Equal Height to preview.
Targeting Multiple CSS Classes for Equal Height
In this example, 3 infobox blocks have uneven height because both titles and descriptions differ in length. Two elements are causing the height difference, not one. To preserve design alignment across cards, titles need to be equal in height separately from descriptions; setting equal height only on the container would not keep titles and descriptions independently aligned.
The Equal Height feature lets you target multiple elements by entering multiple CSS classes in the same field, separated by commas.
Go to the frontend, right-click on the description, open Inspect Element, and copy the class name; in this example it is service-desc. Return to the WordPress editor, select the main container, go to Advanced > Nexter: Equal Height > Equal Height, turn on the toggle, and paste the class name with a period (.) in front, like .service-desc, into the Enter Unique Class field.
Now inspect the title element on the frontend to find its class name; in this example it is service-title. Return to the editor and, to add a second class, place a comma after the first class name and add the second class with a period (.) in front, with no spaces. In this example the result is .service-desc,.service-title.
Click Apply Equal Height. All infobox blocks are now equal in height, with titles and descriptions aligned independently across each card.
Limitations
- Equal Height must be set on the parent container, not on individual child elements – there is no per-element toggle.
- Finding the correct CSS class requires using the browser’s Inspect Element tool; there is no visual class picker inside the block editor.
- A class name that also matches unrelated elements elsewhere on the page (a reused, non-unique class) will equalize those too, which can produce unexpected results – use a class as specific as possible, adding a parent class if needed.
- The Apply Equal Height button only previews the change in the editor; the setting is not saved until you click Update.
Troubleshooting
- Equal Height works on the backend editor but not on the live frontend, or resets after a page refresh. A real, confirmed report (FluentSupport ticket #20273, Nexter WP) found Equal Height breaking after a plugin update, requiring the toggle to be turned off, saved, and turned back on again on every affected page – if this happens after an update, re-toggle and re-save Equal Height on the container, and check for a newer plugin version if it recurs.
- Equal Height option does not appear under Advanced > Nexter: Equal Height. Confirm the Equal Column Height extension itself is activated under Nexter → Blocks (see How to Activate above) – the Advanced-tab control only appears once the extension is turned on.
- Two related blocks (for example, Process Steps and a scroll-based module) lose equal height together after an update. A real, confirmed report (FluentSupport ticket #20088, Nexter WP) saw this on a homepage after a plugin update – treat it the same as the reset case above: re-apply and re-save Equal Height on each affected container rather than assuming the setting itself is broken.
