Skip to content

Simple JavaScript plugin to make different elements the same height.

Notifications You must be signed in to change notification settings

tannerhodges/match-height

Repository files navigation

🦖 Match Height

Simple JavaScript plugin to make different elements the same height.

⚡️ Quick Start

  1. npm install @tannerhodges/match-height
  2. import MatchHeight from '@tannerhodges/match-height'; -- OR -- <script async src="match-height.js"></script>
  3. Add data-match-height to your elements.

📖 Outline

🤔 Why?

Flexbox & CSS Grid are amazing tools, but until we get CSS Subgrid you still need JavaScript to match elements across containers.

Match Height makes this as easy as adding a data-match-height attribute.

👉 For a full explanation & demos, check out the docs.

⚙️ Install

  1. Install the package.
npm install @tannerhodges/match-height
  1. Import the package into your application script.
import MatchHeight from '@tannerhodges/match-height';

Or, if you prefer, include the script in your HTML.

<script async src="match-height.js"></script>

👨‍🏫 HTML API

  • data-match-height="<NAME>" - Match this element's height other elements that have the same name.
  • data-match-height-group="<NAME>" - Wrap around a group of elements so they're matched separately from other elements with the same name.
  • data-match-height-enable="<BOOLEAN_OR_MEDIA_QUERY>" - Enable match height at a specific breakpoint.
  • data-match-height-disable="<BOOLEAN_OR_MEDIA_QUERY>" - Disable match height at a specific breakpoint.
<div class="example"
  data-match-height-group="example"
  data-match-height-enable="(min-width: 768px)">
  <div>
    <h3 data-match-height="heading">Person 1</h3>
    <img src="" alt="">
  </div>
  <div>
    <h3 data-match-height="heading">Person 2</h3>
    <img src="" alt="">
  </div>
  <div>
    <h3 data-match-height="heading">Person With a Long Name</h3>
    <img src="" alt="">
  </div>
</div>

🤖 JavaScript API

  • MatchHeight.add(elements, [groupID]) - Add one or more elements to Match Height. By default, this adds elements to their own, unique group. Otherwise, it adds them to the group you specify.
  • MatchHeight.remove(groupOrElements) - Remove one or more elements, or a whole group, from Match Height. In other words, "stop matching these." Removes the data-match-height attribute and inline height style from each element.
  • MatchHeight.update([groupOrElements]) - Update heights for all currently tracked elements, or only update a specific group of elements.
  • MatchHeight.reset() - Reset Match Height. Find any elements with data-match-height and start matching them.
  • MatchHeight.debug([groupOrElements]) - console.log info about a group of elements. Shows whether a group is enabled, what element is controlling it, and what other elements are in the group.
import MatchHeight from '@tannerhodges/match-height';

// Add elements to a new group
MatchHeight.add('.example h3', 'example-heading');

// The rest is up to you!
// 🏃‍♂️ Go make something!

✍️ CodePen Examples