🦖 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 --_
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.

``bash
npm install @tannerhodges/match-height
`

2. Import the package into your application script.

`js
import MatchHeight from '@tannerhodges/match-height';
`

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

`html

`

👨‍🏫 HTML API

- data-match-height="" - Match this element's height other elements that have the same name.
- data-match-height-group="" - Wrap around a group of elements so they're matched separately from other elements with the same name.
- data-match-height-enable="" - Enable match height at a specific breakpoint.
- data-match-height-disable="" - Disable match height at a specific breakpoint.

`html


data-match-height-group="example"
data-match-height-enable="(min-width: 768px)">

Person 1

Person 2

Person With a Long Name

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

`js
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