Grid columns with varying width overflow and truncating
Hello, I'm trying to make a card that has a title, button and 4 spans containing details about it. On small screens, the details are under one another and on large screen I want them to go all in one row next to each other and truncate with ellipsis if they take too much space. On large version the title takes almost the whole first row (4 out of 5 columns) and the button takes all rows on last column.
I managed to make the layout I want with grid, and the small version looks and behaves exactly how I want it to (first screenshot). On large version my columns with
min-content, the ones I don't want to shrink, are okay. However, the first 2 columns ideally I'd want to only take the space they need (now they grow infinitely if there's space available) and shrink if there is no space for other non-shrinking columns (they shrink, but no ellipsis appear)
I addedoverflow: hidden; text-overflow: truncate; white-space: nowrap (truncate class in tailwind) onto my spans but it doesn't seem to work, also not sure what template-columns I should be using.
I tried auto (first card) and it shrinks (no ellipsis) and grows infinitely (I want them to stop when they maxed out).
minmax(0, 1fr) (second card) shrinks the same as auto (also no ellipsis), somewhat doesn't grow fully (last column expands but the first 2 still grow more than content)
I also tried fit-content (third card) and it shrinks the same as previous 2 and grows only to declared in fit-content value but doesn't show ellipsis
Here's a link to tailwind playground, I hope it shows what I'm trying to do
https://play.tailwindcss.com/GmxIXx0ZVjTailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
6 Replies
Bump, is what I'm trying to do even possible with grid? Or should I just try to do it with flex? I think maybe flex-shrink on the details I want to shrink and the other 2 having
width: min-content; or something like that could work but I really liked the way grid was going :/So, each one of those elements seems to have a
flex class on it.
On the last example, if you remove the flex class, I think you get the desired result, where the ellipsis works
Oh, wait, you said you want that one to fill up the available space, if there is any.
In that case, replace the fit-content() with 1fr, or if you want to keep that as small as it gets, you could do a minmax(20ch, 1fr)It's probably because I'm not communicating clearly, but, if you look at the playground link, the second card (with first 2 columns having
auto) is closest to what I'm trying to achieve. The first 2 columns shrink (but there is no ellipsis) and they grow when there's space, but keep taking more space than they need (not all of it for some reason).
The 1fr and minmax(20ch, 1fr) you suggested don't really work better in the ways that matter to me
I hope screenshots help a bit, sorry for the handwriting
Ah, okay, try this then (however you'd do this with tailwind 😅:
The fit-content value I just put as a very big number (you might want to make that shorter?). that just acts as a limit to the biggest it can get, but if the text is shorter, it will take that much space. If there are over 100 characters, it will stop there though (so you could technically make it 1000ch and it'll just always match the text, as long as there is room).
As for the ellipsis, you have a display flex on both of them, which breaks that behavior, so you need to remove the
flex class to allow for the ellipsis to workThis is exactly what I needed, thank you very much
Actually I noticed one small thing, when the title (first row, takes 4 columns) is very long, it makes those
fit-content columns grow to take the space made by big title, they no longer shrink
Here's a link to updated playground
https://play.tailwindcss.com/qNFugo46In
If you or anybody else has an idea how to fix that (if it's fixable with grid) I'd appreciate it a lotTailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
