DEV Community

Grid cell issue with white-space: nowrap & text-overflow: ellipsis

Luca Uliana on January 03, 2018

N.B.: I solved with min-width: 0 applied on each .grid__item, like in flexbox world. Anyone can help me with this css grid stuff? I have a co...
Collapse
 
timhecker profile image
Luca Uliana •

I solved with min-width: 0 applied on each .grid__item, like in flexbox world ;)

Collapse
 
reenan profile image
Renan Souza •

Thank you for putting this here. Helped me with the same issue today.

Collapse
 
mateus_vahl profile image
Mateus Vahl •

Thanks

Collapse
 
cplepage profile image
CP Lepage • • Edited

Wow thanks!! Makes sense

Collapse
 
admtech profile image
Admtech •

You can also solve it by following instructions:
grid-template-columns: repeat(4, minmax(0, 1fr));

Is similar to the "min-width: 0" but more elegant :-)

greeting
frank

Collapse
 
renannobile profile image
Renan Lourençoni Nobile •

I played a little with your code, is this what you need?

Collapse
 
timhecker profile image
Luca Uliana •

Mmh, i'm in a responsive environment, I can't use absolute widths, like 300px.

Collapse
 
renannobile profile image
Renan Lourençoni Nobile •

What if you change 300px to 100vw?

Thread Thread
 
timhecker profile image
Luca Uliana •

This works, but it's not a solution for me :( you changed the repeat() function with auto-fill, but I need 4 cols. For the moment I solved using flex instead of grid.

Collapse
 
alephnaught2tog profile image
Max Cerrina •

So to clarify--you want those three paragraphs in a row, with the box shadow under each one, and for the title to be truncated instead of wrap, correct?

Collapse
 
timhecker profile image
Luca Uliana •

Yep, more or less