I can’t imagine I’m the first person to ask this but I don’t really know the correct terminology as searches don’t come up with anything similar to what I’m asking. Sorry if I’ve created a duplicate question…
I have a set of 2 columns with content blocks that consist of an icon and a block of text. The text in each content block has different character counts. I can get the to all be the same height, but when I start testing responsiveness, the text adjusts and can cause some to have 8 lines of text while other have 7. This makes their height vary ab it and they no longer align nicely.
Use a grid to force the rows and columns to be the same height. This will result in whitespace inside your card at the bottom ( if it’s top aligned ) or a gray-background gap if you div-wrap your white box.
Force your text to a fixed number of rows using CSS line-clamping.
Thanks @memetican, as always, for the suggestion. You always write back to my noobie posts and I really do appreciate it!
For this use case, I am happy to have some extra whitespace. Switching from columns to grid worked perfectly. Thanks!
I have another grid that I can’t seem to behave the same way. When that one is resized, the blocks do not stay the same size. These have varying heights despite being in a grid. Any idea what could be causing this?
