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

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 complicated HTML structure:

<div class="grid">
  <div class="grid__item">
    <div>
        <a href="#">
            <div class="grid__detail">
              <h2>Lorem ipsum, dolor sit amet consectetur adipisicing elit.....very long title</h2>
            </div>
        </a>
    </div>
  </div>
  [...]
</div>

And I'm using CSS grids:

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 2rem;
}

I need a box-shadow on a inner div:

.grid__item div {
    box-shadow: 0 0 10px red;
}

with a long text title, I need the text-overflow prop to truncate it:

.grid__item h2 {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
}

For some weird reasons the cells grow up, until to contain the whole text, and so, my grid breaks down. overflow: hidden on my grid cell solves the issue, but I can't use box-shadows on the inner div.

.grid__item {
    // overflow: hidden; // this fixes the problem, but say goodbye to the inner box-shadow
        min-width: 0; // this fixes the problem with truncate text
}

Any ideas? :(

Comments

[Luca Uliana]

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

[Renan Souza]

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

[Mateus Vahl]

Thanks

[CP Lepage]

Wow thanks!! Makes sense

[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

[Renan Lourençoni Nobile]

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

[Luca Uliana]

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

[Renan Lourençoni Nobile]

What if you change 300px to 100vw?

[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.

[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?

[Luca Uliana]

Yep, more or less