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