CONTEXTO: actualmente tengo un montón de divs (alrededor de 80) que se llenan en un contenedor que se supone que se desborda horizontalmente (para el desplazamiento) con estos elementos. Algunos de estos son solo cuadrados div de colores, mientras que algunos de estos elementos son elementos divs con texto (p) en ellos. Como suele ser el caso, estas palabras pueden ser largas o algunas son cortas, por lo que no puedo decir explícitamente cuánto tiempo abarcar estos elementos en la cuadrícula. No sé dónde estará la ubicación de estos elementos de texto porque entran dinámicamente a través de javascript. Soy nuevo en la cuadrícula css.

MI PROBLEMA:

No sé cómo hacer que la cuadrícula actual llene los espacios vacíos con divisiones cuadradas, actualmente solo se expanden al ancho máximo de la columna, que se estira por la longitud de la palabra.

CSS NAMING: Los divs con texto tienen una clase .textbox mientras que los divs de cuadro tienen una clase .box .

COMO LUCE

COMO QUIERO QUE SEA

CÓDIGO CSS

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

CÓDIGO JSX

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