Make all cards grow when the title grows to a new line on one of them

[Tookster (Wouter van Waning)]

Hi all,

I’m optimizing a website I’ve made for a client two years ago and am trying to build as responsive as possible, with as little fixed elements as possible.

I’m encountering a problem though and can’t find the solution, also not on Youtube, Stack Overflow, etc, even though I think it’s a common example.

For the “About Us” page, I’ve built a card to show each employee, containing an image, name, job description and contact details.

By setting the wrapper to a 100% height I was able to make each card the same height. I also pushed the contact details down using ‘margin: auto’ on it’s wrapper.

So far so good, but when testing I’ve encountered a problem when a person has a long surname. Then the job description gets pushed down, but the same element of the siblings is staying the same, because unfortunately the height of the name element isn’t adapted from the longest name.

I’ve tried flex-grow, shrink, stretch, etc., both on the element and it’s container, but no luck, and all examples I can find are more general, for instance about making the full card of all siblings the same height.

Would be educational if someone can help me out, because now I’ve fallen back to given the name element a fixed height based on a two line name, which will work in the end but isn’t the real solution.

---

Here is my site Read-Only

[memetican (Michael Wells)]

Check out CSS subgrids, looks like a perfect setup for this.

Comparison Grid Layout | Webflow Layout Techniques | Sygnal-U

The cloneable is here-

Layout Demos - Webflow

[Tookster (Wouter van Waning)]

Amazing!
I only had to watch your video-tutorial and was easily able to reproduce it, very clear instructions. Here’s the result (I temporarily added some Lorem Ipsum to two surnames, and the job descriptions vary in length too by themselves):

It’s very good to know, and indeed what I was looking for more precisely was equal row heights. I was afraid your solution wouldn’t be able to wrap a column/sub-grid to a new row in total, since this didn’t come by in the tutorial, but changing the amount of columns on the parent grid did this like a charm

The minor disadvantage with this solution is that it doesn’t feel the cards are really their own entity. It’s really a mental thing, but I would’ve liked to put the card in a component, making the page more robust and also making it more easy to harmonize all cards on the site. This isn’t possible but obviously a matching and clean layout for the user is more important.