Create A Responsive Uniform Card Grid With jQuery - heightLine.js

File Size: 6.38 KB
Views Total: 1834
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Create A Responsive Uniform Card Grid With jQuery - heightLine.js

heightLine.js is a tiny jQuery equal height plugin to create a responsive uniform card grid by equalizing the height of the grid items in a row.

More Features:

  • Lightweight and easy to use.
  • Allows dynamic grid content.
  • Font size check.
  • Supports min/max breakpoints.

How to use it:

1. Put the main JavaScript file jquery.heightLine.js after loading jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.heightLine.js"></script>

2. Call the function on the children of a set of elements and the plugin will do the rest.

<div class="box">
  <div>Maecenas aliquam.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada felis ut gravida consequat. Quisque id gravida lectus. Integer vehicula pellentesque odio volutpat feugiat. Pellentesque purus diam, tincidunt id diam et, dictum lacinia odio. Nulla sollicitudin nec quam auctor venenatis. </div>
  <div>Duis cursus sapien eu velit congue imperdiet. </div>
  <div>Morbi elementum, ante ac tincidunt convallis, mi tellus mattis mi, nec dapibus enim augue vel urna. Donec sit amet nisi eros. Sed quam velit, tincidunt id ullamcorper sagittis.</div>
</div>
$(function(){
  $(".box > div").heightLine();
});

3. Equalize the height of the grid items depending on the screen size.

$(".box > div").heightLine({
  maxWidth: 700,
  minWidth: 500
});

4. Determine whether to take font size into account. Default: false.

$(".box > div").heightLine({
  fontSizeCheck: true
});

5. Refresh the plugin in cases where new items are added to the grid.

$(".box > div").heightLine("refresh");

6. Destroy the plugin

$(".box > div").heightLine("destroy");

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