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;
}
image.png
Was this page helpful?