search

loba-b / react-equal-height

Compares element heights and sets the highest
MIT License
18 stars 9 forks source link

How does one deal with grid layouts with variable columns per row, and want equal heights per row? #9

Closed amityweb closed 1 month ago

amityweb commented 7 months ago

I have a grid or flex layout which wrap my columns. I have different number of columns per width, so large may have 4, medium 3 columns, then down to 2. I do not use HTML to break these up as that is just PITA. CSS does it.

If I use EqualHeight which is great, it works, it changes ALL columns to the same height regardless of row. I noticed I have a lagr image in my last row, so all column image containers are set to that one, and so they are too large. Ideally you want it to have EqualHeight per row.

I am not sure how you would achieve that based on it being a flex or grid layout. I've never tried to see if JS can know the last or first elements in a grid/flex row. If it can, then this should be achievable.

In the meantime how does one deal with this? I think I will have to try to set a max. height on my columns content to prevent EqualHeight making them all too large based on a high one.

loba-b commented 7 months ago

Can you provide an example code in some online editor to show exactly what you mean, unfortunately I can't imagine it

dungle-scrubs commented 6 months ago

I think what he is describing is the same in this issue, is that correct?

loba-b commented 5 months ago

Ah, ok, I understand. So I would like to create some PoC.

loba-b commented 1 month ago

@amityweb from new version of library @2.0.0 I added such option equalRows