How to equalize sizes across different components - or a better approach

Hi everyone, I have a slider containing several cards (see attached). The issue I have is that depending on the content of the header (for exaple if venue name spans 3 lines instead of two) the date component next to it expands causing the cards to look inconsistent. But on the other hand if I set the date component to stick to the top right with no expansion it also doesn't look nice. Is there a possible way so that if the date component expands in one card it expands in all the cards, or is that impossible? What would be the ideal approach to achieve consistency here?
No description
8 Replies
Jochem
Jochem2mo ago
you can use subgrid for this
Solin
SolinOP2mo ago
hmmm don't think i've used it before, i'll read up on it thank you! oh wow this is so good, thank you @Jochem
Jochem
Jochem2mo ago
glad to help!
ἔρως
ἔρως2mo ago
an alternative solution: use shorter names then you can show the NOV the same size as the day or slightly smaller and it will look way better, and less visually cluttered
Jochem
Jochem2mo ago
I mean, "do a redesign" isn't necessarily the answer... but simultaneously, I do think the cards are maybe a bit narrow for their height it looks like those elements are sharing the width 50/50 so that wouldn't really fix anything
ἔρως
ἔρως2mo ago
it would fix the "november" being so huge and would make it a lot easier to make both squares the same size and to do that, all you would need to do is absolutely nothing
Jochem
Jochem2mo ago
the issue here is the left half of the top row pushing the content down though
ἔρως
ἔρως2mo ago
OH, i see, i see 🤦‍♂️

Did you find this page helpful?