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? :(
Top comments (13)
I solved with
min-width: 0applied on each.grid__item, like in flexbox world ;)Thank you for putting this here. Helped me with the same issue today.
Thanks
Wow thanks!! Makes sense
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
I played a little with your code, is this what you need?
Mmh, i'm in a responsive environment, I can't use absolute widths, like 300px.
What if you change 300px to 100vw?
This works, but it's not a solution for me :( you changed the
repeat()function withauto-fill, but I need 4 cols. For the moment I solved using flex instead of grid.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?
Yep, more or less
Some comments may only be visible to logged-in visitors. Sign in to view all comments.