Powerful Equal Height Grid Plugin With jQuery - equalHeights.js

Just another Responsive equal height jQuery plugin which has the ability to equalize the height of grid items row by row. The plugin also allows you to set all the grid items to equal height regardless of whether they are in the same row. Supports any media types such as images, iframes, videos, objects and much more.

How to use it:

1. Place the JavaScript file jquery.equalheights.js after jQuery JavaScript library and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.equalheights.js"></script>

2. Attach the function to the grid items and done.

$(".grid-item").equalHeights();

3. Re-init the plugin on window resize for responsive web layout.

$(window).resize(function(){
  $(".grid-item").equalHeights();
});

4. You can also specify the inner & parent elements to be affected by the equal height plugin.

$(".grid-item").equalHeights({
  innerItem: false,
  parent: $(this).parent(),
});

5. Setting the perRow to false will apply the plugin to all the grid items.

$(".grid-item").equalHeights({
  perRow: false
});

---

This awesome jQuery plugin is developed by iiiBird. For more Advanced Usages, please check the demo page or visit the official website.