CODEWITHSUNDEEP
javascriptcssreactjscss-grid
Laiqa Mohid
Laiqa Mohid

Reputation: 561

How to fill in extra grid items in empty spaces?

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 IT LOOKS

HOW I WANT IT TO LOOK enter image description here

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

Upvotes: 2

Views: 552

Answers (1)

Brett Donald
Brett Donald

Reputation: 14407

To get the look you've illustrated, I wouldn't bother with either grid or flexbox, just use regular inline blocks and turn off the wrapping.

div {
  font-size: 30px;
  font-family: sans-serif;
  color: #a7e7a1;
  white-space: nowrap;
  font-weight: bold;
  overflow: auto;
  line-height: 1;
  background-color: #22946e;
  padding: 10px;
}
p {
  margin: 0;
}
i {
  display: inline-block;
  background-color: #a7e7a1;
  height: 22px;
  width: 22px;
  margin: 0 0.2rem;
  border-radius: 3px;
}
span {
  margin: 0 1px;
}
<div>

<p><i></i><i></i><span>Fred</span><i></i><i></i><i></i><i></i><i></i><i></i><i></i>David<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></p>

<p><i></i><i></i><i></i><i></i><span>James</span><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></p>

<p><i></i><i></i><i></i><i></i><i></i><i></i><span>William</span><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></p>

<p><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><span>Norman</span><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></p>

<p><i></i><i></i><i></i><span>Paul</span><i></i><i></i><i></i><i></i><i></i><i></i>Matthew<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></p>

</div>

Upvotes: 1

Related Questions