Как улучшить работу интерактивной сетки? ⇐ CSS

[Anonymous]

У меня есть эта сетка с тремя столбцами, и когда я нажимаю на один из элементов div, она перемещается вниз по строке и охватывает всю строку, а также снова закрывается, когда я нажимаю на нее снова. Кроме того, когда я открываю другой div, он закрывает все остальные, если они открыты. так что одновременно открывается только один

Код: Выделить всё

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

Код: Выделить всё

1  one   
2  two   
3  three 
4  four  
5  five  
6  six   
7  seven 
8  eight 
9  nine  
10 ten   

есть ли способ, чтобы при нажатии на один из них принести следующий, чтобы заполнить пробел? Я не знаю, имеет ли это смысл... Допустим, я нажимаю #two, кроме #one будет два пустых места... есть ли способ объединить #three и #four, чтобы заполнить это пространство?

Подробнее здесь: https://stackoverflow.com/questions/790 ... ork-better