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.

The columns option controls how Hequalizer groups elements before measuring them. Different layouts call for different grouping strategies: a single hero row needs every element equalized together, a multi-row grid needs row-by-row grouping, and a mobile single-column stack needs no equalization at all. Hequalizer covers all three cases through the columns option.

​
columns: "all" (default)

When columns is "all", Hequalizer measures every element in the group, finds the single tallest one, and applies that height as the CSS variable to all elements uniformly.
main.js
const instance = new Hequalizer('card-title', { columns: 'all' });
// instance.values => 140  (if the tallest element is 140px)
instance.values is a single number — the maximum height found across all elements. This mode is best for carousels, sliders, or any layout where all items are in the same visual row regardless of count.
index.html
<div class="slider">
  <div class="slide">
    <h2 data-hequalizer="slide-title">Slide One</h2>
  </div>
  <div class="slide">
    <h2 data-hequalizer="slide-title">A Much Longer Slide Title That Wraps</h2>
  </div>
  <div class="slide">
    <h2 data-hequalizer="slide-title">Slide Three</h2>
  </div>
</div>
main.js
new Hequalizer('slide-title', { columns: 'all' });
styles.css
[data-hequalizer="slide-title"] {
  min-height: var(--height);
}

​
columns: 2, 3, 4, etc.

When columns is a number greater than 1, Hequalizer divides the elements into consecutive groups of that size. Each group independently receives its own maximum height — elements in one row are never influenced by elements in another row.
main.js
const instance = new Hequalizer('card-title', { columns: 3 });

// 9 elements grouped: [0,1,2], [3,4,5], [6,7,8]
// instance.values => [120, 160, 140]
instance.values is an array of numbers, one entry per group.

​
How the grouping works

Elements are sliced into consecutive chunks using their DOM order — exactly matching how CSS Grid lays them out row by row when all columns are equal width: 
Elements 0-2  →  group 1  →  max height applied
Elements 3-5  →  group 2  →  max height applied
Elements 6-8  →  group 3  →  max height applied
Each chunk measures its own tallest element and sets the CSS variable only on the elements within that chunk. A row with very short titles does not force all other rows to match the tallest row in the entire grid.

​
Example: 3-column product grid

index.html
<div class="product-grid">
  <article class="product-card">
    <h3 data-hequalizer="product-title">Wireless Earbuds</h3>
  </article>
  <article class="product-card">
    <h3 data-hequalizer="product-title">Over-Ear Studio Headphones with Active Noise Cancellation</h3>
  </article>
  <article class="product-card">
    <h3 data-hequalizer="product-title">Portable Speaker</h3>
  </article>
  <article class="product-card">
    <h3 data-hequalizer="product-title">Smart Soundbar</h3>
  </article>
  <article class="product-card">
    <h3 data-hequalizer="product-title">Turntable</h3>
  </article>
  <article class="product-card">
    <h3 data-hequalizer="product-title">Subwoofer with Dual Driver Technology</h3>
  </article>
</div>
main.js
new Hequalizer('product-title', { columns: 3 });
styles.css
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

[data-hequalizer="product-title"] {
  min-height: var(--height);
}
The columns value should always match the number of columns in your CSS grid. Combine columns with the responsive option to keep the two in sync as the layout shifts at different viewport widths.

​
columns: 1 or less

When columns is 1 or any number less than 1, Hequalizer skips measurement entirely. It clears all CSS variables that it previously set and removes all state classes (height-calculated, height-calculating, height-zero) from every element. No minimum height is applied. This is the cleanest way to disable equalization at a specific breakpoint without destroying the entire instance:
main.js
new Hequalizer('card-title', {
  columns: 3,
  responsive: {
    480: { columns: 1 }  // disables equalization on mobile
  }
});
At viewport widths of 480px or below, all elements revert to their natural content height. When the user resizes back above 480px, Hequalizer automatically recalculates using columns: 3 again.
Prefer columns: 1 over calling destroy() when you only want to disable equalization temporarily at a breakpoint. The instance stays alive and resumes work as soon as a different breakpoint becomes active.

​
Choosing the right mode

columns: 'all'

Best for carousels, sliders, or any component where every item occupies the same single row. Sets one shared height for the entire group.

columns: N

Best for multi-row CSS grids. Set columns to match your grid’s column count so each row is equalized independently.

columns: 1

Best for disabling equalization at a breakpoint where the layout is a single column or elements should use natural heights.

Build docs developers (and LLMs) love

Get started for freeTalk to us