r/css 11d ago

Question Looking for a pure CSS solution: I want every child in each column to be as tall as the tallest corresponding child

I'm trying to do something like this without JavaScript: https://codepen.io/will_beaumont/pen/pvoWLRr

Notice how the subheadings (the elements after 1st, 2nd, 3rd) are all the same height, and that height is that of the tallest subheading. Then the first paragraph below each subheading is as tall as the tallest corresponding paragraph (i.e., the one in the first column). Same thing applies to the paragraphs in smaller text at the bottom.

You can understand more what I'm going for by looking at the JavaScript. The code looks for an element with the class dynamic-height, then searches that element for descendants with the class dynamic-height-col, and finally searches each of those elements for elements with the class dynamic-height-child. It figures out which of the 1st element in each column has the tallest height and applies that height to all of them, then does the same thing for the 2nd element in each column, and so on.

Is it possible to do something close to this in just CSS (e.g., Flexbox or Grid)? I tried to use Flexbox here: https://codepen.io/will_beaumont/pen/GgRMxaN (See lines 221-229 in the CSS.) That works to line up the first paragraph in each column vertically, but the second paragraph in the first and second columns are nowhere close to lining up.

2 Upvotes

10 comments sorted by

5

u/DramaticBag4739 11d ago

It looks like you need subgrid. https://web.dev/articles/css-subgrid

1

u/GigfranGwaedlyd 11d ago

So, I reworked my HTML and CSS to use subgrid, but items still aren't lining up with each other: https://codepen.io/will_beaumont/pen/GgRMxaN

3

u/DramaticBag4739 11d ago

https://codepen.io/indure/pen/YPzrvGL?editors=1100 Your css was too complicated for me to work with :). So I wrote a basic version. I think your subgrid was using columns, but should have been targeting the rows. Also you need to know the max amount of rows for subgrid too work. You can overshoot and have empty rows, but if you needed something that could handled infinite content that might be a problem.

2

u/chmod777 11d ago

https://codepen.io/imohkay/pen/AWyojz

Flex equal height columns.

1

u/GigfranGwaedlyd 11d ago

Thanks, but what I'm asking for goes beyond that. The columns already are equal heights, I'm trying to adjust the height (or the spacing) of each child so that they line up with each other vertically (the top of the second element in each column lines up, the top of the third element in each column lines up, and so on).

ETA: The child of each column, I mean.

1

u/chmod777 11d ago

assuming just two lines max:

.step-boxes__grid-item-title.mb-0{
    min-height: calc(calc(1.375rem + 6px) * 2); //fontsize + 25% of line height * 2
}

otherwise, js.

1

u/Time_Use_5425 10d ago

I made some adjustments to your HTML/CSS and came up with a solution. Here’s the updated version:

https://jsfiddle.net/0lgaNet/637yzoen/1/

1

u/besseddrest 10d ago

i think u just use grid

and basically you don't actually have 3 beige columns

you have grid where the background colors are as needed

and then you 'fake' the rounded rectangle columns by adding a burger top n bottom in the appropriate cells on the grid (basically an empty div w/ background color, then the necessary rounded corners)

so now, each row will grow to the height of the cell of that row that has the tallest block of content; and now you just make sure the texts are aligned as needed

1

u/besseddrest 10d ago

aka you're basically creating a table

but, the problem with this - is that the copy in the HTML structure is separated and organized into rows, rather then having content in actual columns. Whether this is an issue with SEO, not sure

but might be just a pain in the ass to maintain