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):
div.grid-of-columns {
display: grid;
grid-template-columns: repeat(12, 300px);
gap: 10px;
}

div.grid-of-areas {
display: grid;
grid-template-columns: [image-start]
1fr
[image-end term-start desc-start latest-start]
1fr
[term-end desc-end latest-end];
grid-template-rows: [term-start image-start row-start]
auto
[term-end image-end desc-start]
auto
[desc-end latest-start]
1fr
[latest-end row-end];
}

div.grid-item {
grid-area: desc;
}

span.text {
margin:0;
}
div.grid-of-columns {
display: grid;
grid-template-columns: repeat(12, 300px);
gap: 10px;
}

div.grid-of-areas {
display: grid;
grid-template-columns: [image-start]
1fr
[image-end term-start desc-start latest-start]
1fr
[term-end desc-end latest-end];
grid-template-rows: [term-start image-start row-start]
auto
[term-end image-end desc-start]
auto
[desc-end latest-start]
1fr
[latest-end row-end];
}

div.grid-item {
grid-area: desc;
}

span.text {
margin:0;
}
No description
4 Replies
Jochem
Jochem10mo ago
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 here
Jacord
Jacord10mo ago
I'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.
patwasalinguist
patwasalinguist10mo ago
You need to share a full example with HTML/CSS
Jacord
Jacord10mo ago
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.
Want results from more Discord servers?
Add your server