CONTEXT: I currently have a bunch of divs (about 80) being populated into a container that is meant to be overflowing horizontally (for Scrolling) with these items. Some of these are just coloured div squares while some of these items are divs elements with text (p) in it. As is usually the case, these words could be long or some are short, so I cannot explicitly say how long to span these items in the grid. I don't know where the location of these text elements will be because they come in dynamically through javascript. I'm new to css grid.

MY PROBLEM:

I don't know how to make the current grid fill the empty spaces with sqaure divs, currently they just expand to the max width of column - that is being stretched by the word length.

CSS NAMING: The divs with text have a class .textbox while box divs have a class .box.

HOW IT LOOKS

HOW I WANT IT TO LOOK

CSS CODE

.containerMed {
   width: 1500px;
   position: relative;
   overflow-y: hidden;
   overflow-x: scroll;
   display: grid;
   gap: 5px;
   padding: 2.5px;
   grid-template-rows: repeat(7, 1fr);
   grid-auto-flow: column dense;
}

.box{
    width: 30px;
    height: 30px;
    border-radius: 3px;
    grid-row-end: span 1;
    grid-row-end: span 1;
}

.textbox {
   font-size: 33px;
   white-space: nowrap;
   line-height: 0.8;
}

JSX CODE

function GridPattern(props) {
   let lineup = ["Oneohtrix Point Never", "Kilo Kish", "Sudan Archives","L'Rain"," Weyes Blood","Pussy Riot", "Serpentwithfeet","Jacques Greene","Envelop", "Telefon Tel Aviv","Julianna Barwick"]

   let n = Array.from(Array(80).keys())
   const boxes = n.map((num) => {
       if (num % 9 === 0)
          return <div key={num} className="textbox" style={{ color: props.color }}>. 
          <p>{lineup[num % 12]}</p></div>
       else 
          return <div key={num} className={props.pattern} style={{ backgroundColor: 
                 props.color }}></div>
   })

   return boxes
}

function App() {
<div className="containerMed" style={{ backgroundColor: 'green', height: '250px'}}>
               <GridPattern pattern="box"  color='blue'></GridPattern>
            </div>
  }