Html Question posted in
Some basic documentation can be found here.

Html – how to make an interactive grid work better?

I have this grid with 3 columns, and when i click one of the divs it’ll go down a row and span the whole row, it also closes back up when i click on it again. Also, when I open a different div, it’ll close all the other ones if theyre open. so that there’s only one open at a time

document.querySelectorAll('#gridALBUM > div').forEach((D,_,A)=>
  {
    D.addEventListener('click', e=>
    {
      if (D.classList.toggle('span'))
        A.forEach(d =>{ if(d!=D) d.classList.remove('span') });
    })
  })
#gridALBUM {
  background : lightblue;
  margin     : 50px auto;
  max-width  : 908px;
  display    : grid;
  grid-gap   : 0 4px;
  grid-template-columns: repeat(3, 300px);
  }
#gridALBUM > div {
  border  : 1px solid black;
  display : flex;
  }
#gridALBUM > div:not(.span) > div {
  display : none; 
  }
#gridALBUM > div.span {
  grid-column      : 1 / 4;
  background-color : #47479c;
  }
<div id="gridALBUM">
  <div id="one"   ><h1>1</h1> <div><h2> one   </h2></div></div>
  <div id="two"   ><h1>2</h1> <div><h2> two   </h2></div></div> 
  <div id="three" ><h1>3</h1> <div><h2> three </h2></div></div>
  <div id="four"  ><h1>4</h1> <div><h2> four  </h2></div></div>
  <div id="five"  ><h1>5</h1> <div><h2> five  </h2></div></div>
  <div id="six"   ><h1>6</h1> <div><h2> six   </h2></div></div>
  <div id="seven" ><h1>7</h1> <div><h2> seven </h2></div></div>
  <div id="eight" ><h1>8</h1> <div><h2> eight </h2></div></div>
  <div id="nine"  ><h1>9</h1> <div><h2> nine  </h2></div></div>
  <div id="ten"   ><h1>10</h1><div><h2> ten   </h2></div></div>
</div>

is there a way so that when I click on one of them, itll bring the next one up to fill the gap? I don’t know if that makes sense… Let’s say I click #two, there’ll be two empty spaces besides #one.. is there a way to bring #three and #four to fill up that space?

Tags:

2

Answers


  1. 0

    Just add grid-auto-flow: dense.

    document.querySelectorAll('#gridALBUM > div').forEach((D, _, A) => {
  D.addEventListener('click', e => {
    if (D.classList.toggle('span'))
      A.forEach(d => {
        if (d != D) d.classList.remove('span')
      });
  })
})
    #gridALBUM {
  background: lightblue;
  margin: 50px auto;
  max-width: 908px;
  display: grid;
  grid-gap: 0 4px;
  grid-template-columns: repeat(3, 300px);
  grid-auto-flow: dense
}

#gridALBUM>div {
  border: 1px solid black;
  display: flex;
}

#gridALBUM>div:not(.span)>div {
  display: none;
}

#gridALBUM>div.span {
  grid-column: 1 / 4;
  background-color: #47479c;
}
    <div id="gridALBUM">
  <div id="one">
    <h1>1</h1>
    <div>
      <h2> one </h2>
    </div>
  </div>
  <div id="two">
    <h1>2</h1>
    <div>
      <h2> two </h2>
    </div>
  </div>
  <div id="three">
    <h1>3</h1>
    <div>
      <h2> three </h2>
    </div>
  </div>
  <div id="four">
    <h1>4</h1>
    <div>
      <h2> four </h2>
    </div>
  </div>
  <div id="five">
    <h1>5</h1>
    <div>
      <h2> five </h2>
    </div>
  </div>
  <div id="six">
    <h1>6</h1>
    <div>
      <h2> six </h2>
    </div>
  </div>
  <div id="seven">
    <h1>7</h1>
    <div>
      <h2> seven </h2>
    </div>
  </div>
  <div id="eight">
    <h1>8</h1>
    <div>
      <h2> eight </h2>
    </div>
  </div>
  <div id="nine">
    <h1>9</h1>
    <div>
      <h2> nine </h2>
    </div>
  </div>
  <div id="ten">
    <h1>10</h1>
    <div>
      <h2> ten </h2>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    grid-auto-flow: dense will achieve what you have described:

    document.querySelectorAll('#gridALBUM > div').forEach((D, _, A) => {
  D.addEventListener('click', e => {
    if (D.classList.toggle('span'))
      A.forEach(d => {
        if (d != D) d.classList.remove('span')
      });
  })
})
    #gridALBUM {
  background: lightblue;
  margin: 50px auto;
  max-width: 908px;
  display: grid;
  grid-gap: 0 4px;
  grid-template-columns: repeat(3, 300px);
  grid-auto-flow: dense;
}

#gridALBUM>div {
  border: 1px solid black;
  display: flex;
}

#gridALBUM>div:not(.span)>div {
  display: none;
}

#gridALBUM>div.span {
  grid-column: 1 / 4;
  background-color: #47479c;
}
    <div id="gridALBUM">
  <div id="one">
    <h1>1</h1>
    <div>
      <h2> one </h2>
    </div>
  </div>
  <div id="two">
    <h1>2</h1>
    <div>
      <h2> two </h2>
    </div>
  </div>
  <div id="three">
    <h1>3</h1>
    <div>
      <h2> three </h2>
    </div>
  </div>
  <div id="four">
    <h1>4</h1>
    <div>
      <h2> four </h2>
    </div>
  </div>
  <div id="five">
    <h1>5</h1>
    <div>
      <h2> five </h2>
    </div>
  </div>
  <div id="six">
    <h1>6</h1>
    <div>
      <h2> six </h2>
    </div>
  </div>
  <div id="seven">
    <h1>7</h1>
    <div>
      <h2> seven </h2>
    </div>
  </div>
  <div id="eight">
    <h1>8</h1>
    <div>
      <h2> eight </h2>
    </div>
  </div>
  <div id="nine">
    <h1>9</h1>
    <div>
      <h2> nine </h2>
    </div>
  </div>
  <div id="ten">
    <h1>10</h1>
    <div>
      <h2> ten </h2>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search