Equal Height Helper

[tannerhodges]

Had a task where I needed to match the heights of separate elements in a responsive grid.

The problem with other height plugins is that they don't have easy solutions for:

• grouping elements (e.g., I want to match elements in the same row, not the entire grid)
• resetting at a given breakpoint (e.g., I want equal heights when there are multiple columns, but not when everything stacks on mobile)

So I came up with this equal height helper. All you need to activate is a little HTML.

Examples

Equalize Everything:

<div class="o-grid">
    <div class="o-grid__item" data-equal-height></div>
    <div class="o-grid__item" data-equal-height></div>
    <div class="o-grid__item" data-equal-height></div>
    <div class="o-grid__item" data-equal-height></div>
</div>

Equalize Groups:

<div class="o-grid">
    <div class="o-grid__item" data-equal-height="row-1"></div>
    <div class="o-grid__item" data-equal-height="row-1"></div>
    <div class="o-grid__item" data-equal-height="row-2"></div>
    <div class="o-grid__item" data-equal-height="row-2"></div>
</div>

Equalize Groups at Different Breakpoints:

<div class="o-grid">
    <div class="o-grid__item" data-equal-height='{ "group": "row-1", "media": "(min-width: 30em)" }'></div>
    <div class="o-grid__item" data-equal-height='{ "group": "row-1", "media": "(min-width: 30em)" }'></div>
    <div class="o-grid__item" data-equal-height='{ "group": "row-2", "media": "(min-width: 30em)" }'></div>
    <div class="o-grid__item" data-equal-height='{ "group": "row-2", "media": "(min-width: 30em)" }'></div>
</div>

Future Improvements

I'd like to build this out so it's possible to change groups at different media rules.

Currently, you're stuck with the group you define first. For example, it works well if you're only switching from 1 to 2 columns (or from 1 to 3, 2 to 4, etc.) but if you want a grid that switches from 1 to 2 to 3 columns you're out of luck.

Not sure how I'd want to configure that in a data attribute, or if I'd prefer to do it in JS.

In the meantime, this helper does the job I needed it for.

[glennabaron]

Nice!