Posted on January 21, 2020 by jamie

How to set equal product height on the product grid view.

//Add to list.phtml
<script>
    require([
        'jquery',
    ], function($) {
        'use strict';

        $('.product-item-inner').responsiveEqualHeightGrid();
       
    });
</script>

You must select every element which will be used in the calculation of the grid, the elements do not need to be siblings of each other, therefore both of the following are valid:

<div class="wrapper">
	<div class="element">Content</div>
	<div class="element">Content</div>
	<div class="element">Content</div>
</div>

<div class="wrapper">
	<div class="wrap-element">
		<div class="element">Content</div>
	</div>
	<div class="wrap-element">
		<div class="element">Content</div>
	</div>
</div>

Source:
https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows