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.

Every Hequalizer instance accepts an optional configuration object as its second argument. All five options are optional — each one has a sensible default that works for the most common use cases. Options passed to the constructor are merged with the base defaults, and the responsive map lets you override any subset of those options for specific viewport widths.

​
Defaults at a glance

OptionTypeDefault
cssVariablestring'--height'
columns"all" | number'all'
observeResizebooleantrue
debouncenumber (ms)0
responsiveobject{}

​
Options reference

​
cssVariable
string
default:"'--height'"
The name of the CSS custom property that Hequalizer sets as an inline style on every element in the group. The value written to the property is the calculated maximum height in pixels (e.g., 140px), or it is removed entirely when the height is zero or equalization is disabled.Choose a descriptive name when managing multiple independent groups so their variables don’t collide.
new Hequalizer('product-title', {
  cssVariable: '--product-title-height'
});

[data-hequalizer="product-title"] {
  min-height: var(--product-title-height);
}
​
columns
"all" | number
default:"\"all\""
Controls how elements are grouped before calculating maximum heights.
  • "all" — A single maximum height is calculated across every element in the group. All elements receive the same CSS variable value.
  • Number > 1 — Elements are split into consecutive row-groups of that size. Each group gets its own independent max-height value. The values property becomes an array.
  • Number ≤ 1 — Equalization is disabled. Any previously set CSS variables and state classes are removed, and no new height or state class is applied. Useful for single-column layouts where natural height is preferred.
// All elements share one max height
new Hequalizer('card-title', { columns: 'all' });

// Groups of 3 — each row equalized independently
new Hequalizer('card-title', { columns: 3 });

// Disabled — elements keep their natural height
new Hequalizer('card-title', { columns: 1 });
In a responsive setup you can set columns to a number at large viewports and reduce it to 1 on mobile to cleanly disable height equalization without touching your CSS.
​
observeResize
boolean
default:"true"
When true, the window resize listener recalculates heights whenever the viewport width changes. When false, the resize listener is still registered internally (so the breakpoint logic still runs and actualOptions is updated), but the height recalculation and the hequalizer:{handle}:resize event are both suppressed for that breakpoint.This is useful when you want to keep equalization active at one breakpoint but explicitly opt out of resize-triggered recalculations at another.
new Hequalizer('card-title', {
  observeResize: true,    // default — recalculates on resize
  responsive: {
    480: {
      observeResize: false  // no recalculation on resize below 480px
    }
  }
});
​
debounce
number
default:"0"
Number of milliseconds to wait after the last resize event before running a recalculation. Set to 0 for immediate recalculation on every resize event. Set to a value like 100–200 to reduce recalculation frequency on rapid or continuous resize gestures.The debounce timer is reset on each new resize event, so only the final resize triggers the calculation.
new Hequalizer('card-title', {
  debounce: 150  // waits 150ms of resize inactivity before recalculating
});
The debounce option applies only to resize-triggered recalculations. Content-change recalculations (via MutationObserver) always use a fixed internal delay of 20 ms regardless of this setting.
​
responsive
object
default:"{}"
A map of breakpoint overrides. Keys are numeric viewport widths; values are partial option objects that are deeply merged with the base configuration when window.innerWidth <= breakpoint. The smallest matching breakpoint wins.Any of the other four options (cssVariable, columns, observeResize, debounce) can be overridden per breakpoint. The responsive key itself cannot be nested inside a breakpoint.
new Hequalizer('product-title', {
  cssVariable: '--product-title-height',
  columns: 4,
  debounce: 100,
  responsive: {
    1024: { columns: 3 },
    768: {
      columns: 2,
      cssVariable: '--product-title-height-tablet'
    },
    480: { columns: 1 }
  }
});
Breakpoint resolution order (smallest value checked first):
ViewportActive breakpointEffective columns
≤ 480 px4801
481 – 768 px7682
769 – 1024 px10243
> 1024 pxdefault4

​
Full example

Full configuration example
new Hequalizer('card-title', {
  cssVariable: '--card-title-height',
  columns: 'all',
  observeResize: true,
  debounce: 100,
  responsive: {
    1024: { columns: 3 },
    768: { columns: 2 },
    480: { columns: 1 }
  }
});

​
Responsive CSS variable cleanup

When cssVariable differs between breakpoints, Hequalizer automatically tracks all variable names ever configured and removes every one of them before each recalculation. This prevents a stale inline variable from a previous breakpoint from persisting after the viewport changes. 
[data-hequalizer="product-title"] {
  min-height: var(--product-title-height);
}

@media (max-width: 768px) {
  [data-hequalizer="product-title"] {
    min-height: var(--product-title-height-tablet);
  }
}
Both variables are cleared on every recalculation; only the one matching the active breakpoint is re-applied.

Build docs developers (and LLMs) love

Get started for freeTalk to us