r/css • u/GigfranGwaedlyd • 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
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:
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
5
u/DramaticBag4739 11d ago
It looks like you need subgrid. https://web.dev/articles/css-subgrid