overflowing text in grid area
currently trying to troubleshoot this one: I have a grid of columns, where each item is a grid of implicit areas, and in those areas some text overflowing.
The structure is pretty much this:
.grid-of-columns>.grid-of-areas>.grid-item>.text
and here is my css (simplified for legibility):
4 Replies
it's probably impossible to tell without a full example, something in codepen preferably. The only thing I can think of is that maybe you have a lot of .grid-items and they're getting crammed into the same area because of
div.grid-item {grid-area: desc;}
but you're not exactly giving us a lot to work with hereI'm going to take that to mean there's nothing you can see wrong with the code I have posted, which is at least a starting point by process of elimination!
As it happens there is only one thing in the 'desc' area, so what you're seeing in the screenshot is the span.text from previous grid items overflowing on-top of each-other.
This is all within a really big project, and difficult to disentangle, so I think I'm just going to come back to it with fresh eyes later.
You need to share a full example with HTML/CSS
https://codepen.io/crowjake/pen/XWGMzpG
When I dump the body HTML and my custom CSS into codepen the problem doesn't exist so looks like the problem is probably caused by the CMS and/or javascript/css elsewhere in the instalation.
So I think you guys may not be able to help after all.
For anyone coming across similar issues
container-type: inline-size
on .grid-of-columns, or its parent was necessary to get things working.