Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/soyleninjs/hequalizer/llms.txt

Use this file to discover all available pages before exploring further.

Hequalizer makes it effortless to keep DOM elements visually aligned by computing the tallest element in a group and exposing that value as a CSS custom property. Drop it into any layout — card grids, carousels, product listings — and control height equalization purely through CSS, with no layout hacks required.

Installation

Add Hequalizer via npm, CDN, or direct download in under a minute.

Quickstart

Equalize your first group of elements with just three lines of code.

API Reference

Full constructor, instance methods, options, events, and state classes.

Examples & Guides

Real-world patterns: responsive grids, carousels, multiple groups, and more.

​
Why Hequalizer?

Most height-equalization approaches rely on JavaScript to directly set height or min-height on elements. Hequalizer instead writes a single CSS custom property — --height by default — and lets your stylesheet decide how to use it. This keeps layout logic in CSS where it belongs and makes responsive overrides trivial.

Zero dependencies

Pure vanilla JavaScript — no jQuery, no utility libraries, no build step required.

Responsive by design

Configure different column counts and CSS variables per breakpoint with the built-in responsive option.

Automatic recalculation

Reacts to window resize (with optional debounce) and DOM content changes via MutationObserver.

Instance registry

Retrieve any live instance by handle with Hequalizer.getInstance(handle) from anywhere in your code.

​
Quick look

index.html
<div class="cards">
  <article class="card">
    <h3 data-hequalizer="card-title">Short title</h3>
  </article>
  <article class="card">
    <h3 data-hequalizer="card-title">A much longer title that wraps to a second line</h3>
  </article>
  <article class="card">
    <h3 data-hequalizer="card-title">Another title</h3>
  </article>
</div>
app.js
window.addEventListener('DOMContentLoaded', () => {
  new window.Hequalizer('card-title');
});
styles.css
[data-hequalizer="card-title"] {
  min-height: var(--height);
}
1

Mark your elements

Add data-hequalizer="your-handle" to every element that should share a height.
2

Create an instance

Call new Hequalizer('your-handle') after the DOM is ready — Hequalizer finds the elements automatically.
3

Apply the CSS variable

Use var(--height) (or your custom variable name) in CSS to set min-height, height, or any property.
4

Done

Hequalizer handles resize, content changes, and breakpoint switching automatically from here on.

Build docs developers (and LLMs) love

Get started for freeTalk to us