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
I added
I tried
I also tried
Here's a link to tailwind playground, I hope it shows what I'm trying to do
https://play.tailwindcss.com/GmxIXx0ZVj
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-contentI added
overflow: hidden; text-overflow: truncate; white-space: nowraptemplate-columnsI tried
autominmax(0, 1fr)autoI also tried
fit-contentHere's a link to tailwind playground, I hope it shows what I'm trying to do
https://play.tailwindcss.com/GmxIXx0ZVj
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
