Match Heights AlpineJS Style

[paintface]

Thought I'd share this I've been working on... for if anyone else needs some old skool jquery match height magic but for Alpine JS!

https://github.com/paintface/alpine-match-heights

Basic Usage

<div x-data>
    <div x-match-height style="background: #f0f0f0; padding: 10px;">Short content</div>
    <div x-match-height style="background: #d0d0d0; padding: 10px;">Longer content with more text</div>
    <div x-match-height style="background: #b0b0b0; padding: 10px;">Medium content</div>
</div>

Grouped Usage

<div x-data>
    <div x-match-height="'group1'" style="background: #f0f0f0; padding: 10px;">Group 1 - Short</div>
    <div x-match-height="'group1'" style="background: #d0d0d0; padding: 10px;">Group 1 - Long</div>
    
    <div x-match-height="'group2'" style="background: #b0b0b0; padding: 10px;">Group 2 - Short</div>
    <div x-match-height="'group2'" style="background: #a0a0a0; padding: 10px;">Group 2 - Medium</div>
</div>

[ekwoka]

Interesting, but I also don't understand what the use of it is.

You can do this in CSS without any trouble already...

[paintface]

Just habit and how I work in all honesty. I like being able to look through the html markup and clearly see what's being matched to what, where in css that's either hidden away in files or long tailwind class attributes.

[ekwoka]

But it's just flex box or grid that would do it for you automatically...So you'd know from the structure, no?

[paintface]

Sure yeah, I just find there's inconsistent row behaviour with flex/grid, it doesn't link heights accross multiple rows nicely when I want all my titles (irresepective of how many lines they break over) to be the same height accross the entire page, so that everything that sits below is in the same position.

[ekwoka]

🤔 It's possible.

I found grid and flex solve that, but maybe having multiple items that can have variable size would make it trickier

I was more curious, since I couldn't see what the use was.