🦖 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?
• Install
• HTML API
• JavaScript API
• CodePen Examples
• Changelog

🤔 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

2. 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

• Basic Example
• Responsive Example
• Single Page App Example 1
• Single Page App Example 2
• (The Future!) CSS Subgrid Example - View in Firefox

📝 Changelog