Kevin Powell - Community•5mo ago

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;
}

4 Replies

Jochem•5mo 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•5mo 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•5mo ago

You need to share a full example with HTML/CSS

Jacord•5mo 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.

Gaming

Programming

overflowing text in grid area