How to force equal height (masonry) to The Grid plugin items?

[TelecatsNL]

Hi there,
Question about The Grid plugin, included in X:
I would like the items to have equal height (https://www.telecats.nl/cases-nieuws/testpagina-grids/).

I tried every option I could think about an di don’t see any options in the plugin.
Could you help me out?

Thanks in advance.

Kind regards
Victor

[Alaa]

Hi Victor,

I’m sorry but what’s the point of using the masonry layout if you want to set a fixed height for your items? I mean why not choosing the “Grid” layout instead of “Masonry” in the grid settings?

Thanks.

[TelecatsNL]

As you can see here ( https://www.telecats.nl/cases-nieuws/testpagina-grids/ ) the amount of text is different per item. Because of the background color, I want every item to be equal height.

Grid layout does not cope well with different amount of text without breaking it after a certain amount. Also, I cannot set specific heights for different screens in The Grid plugin…

Do you have a solution?

[nabeel]

Hi again,

You can try adding the following code in the Theme Options > JS:

function sameHeightSection(section) {
	var max = 0;
	var sections = jQuery("." + section);
	sections.each(function(index, el) {
		if( jQuery(this).height() > max ){
			max = jQuery(this).height();
		}
	});
	jQuery("." + section + " > .tg-item-inner").css({
		'height': max, 
		'min-height': max, 
		'max-height': max
	});
}

jQuery(document).ready(function($) {
	sameHeightSection('tg-item');
});

jQuery(window).resize(function(){
	sameHeightSection('tg-item');
});

As you see this requires custom development and the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Thank you!

[TelecatsNL]

Thanks for your reply.
Not really sure which text I should change in the JS…
I thought The Grid plugin was made by Themeco, same as X pro?

Is there a way to make equal height columns in the “classic block grid”?

kind regards
Victor

[ruenel]

Hello Victor,

The only way you can make equal column heights or with the classic block grid is to insert the same amount of height for the contents of the column or block grid. They should have at least similar heights to maintain the equality of the heights. If the content heights is unavoidable, then you will have to use a custom css and set a minimum/average height for each column or block grid items.

Hope this briefly explains the equal heights. Thanks.

[TelecatsNL]

Thanks for your help.

Idea for future update:

Elementor offers post grid functionality (with equal height). Maybe X can offer this also so there’s no need for a plugin anymore

[rad]

Hi @TelecatsNL,

You’re welcome! And noted this as a feature request.

Thanks!