How to make a div in each card item equal in height
Hi guys, I have a layout like the picture below. I want the div which display description are equal in height. How can I handle this case? Here is codesandbox: https://codesandbox.io/p/sandbox/lucid-khorana-8mqt45?file=%2Fsrc%2FApp.js%3A52%2C19
8 Replies
Subgrid if the support works for your use case
Ok. I will look into it
you could also do something like this:
the second selector essentially says "give anything that is second to last
flex: 1;" which will push the last item on all the cards to the bottom since that element is taking all the remaining space. I wrote it like that since it's more dynamic and you don't have to directly select something like .xyz {...}. It'll adapt if you change the html structure.
I personally use something like this since i find it more simpler than subgrid but the subgrid solutions works great too.you'd also have to set the height of the bottom item to something explicitly then, otherwise it'll take up as much space as it needs and no more
wouldn't you want it to take up as much space as it needs?
the question is how to make the bottom bits of the card take up the same amount across multiple cards
not how do I put the last element at the bottom of the card
oh i read it wrong haha. Well that also comes into play i guess since in the image his content above the last div is all the same size across every card. It'd make sure they align up if one set of content is larger than the others.
but if not, then ignore everything i said haha.
or you give the textwrap a min-height of e.g. 3em