Могу ли я переключить переключение (с OnClick) между двумя разными структурами сетки? ⇐ CSS

[Anonymous]

Я не могу найти способ достичь перехода между двумя разными структурами сетки. Переключатель работает нормально; Я просто переключаю класс DOV в рамках изложенного сетки-див, где стандартный класс имеет «нормальную» структуру сетки, а у другого класса есть сетка-колокол/строка, которая охватывает двойную. Добавление переход: все 1s; не работает. Я могу добавить переход к некоторым атрибутам стиля, например, фонового цвета. Но не к структуре сетки, когда она переключается. < /P>
Справка очень ценится! Так что DOV «скользит» на место, а не «всплыть» на место.

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

      /* add/remove class to an element */
function changeClass(fromid, toclass) {
var itemdb = document.getElementById(fromid);
var object_class = itemdb.getAttribute("class");

document.querySelectorAll('.item_focus').forEach(it => {
it.classList.remove("item_focus");
it.removeAttribute("style");
it.classList.add("item");
it.style.backgroundColor = "lime";
})

if(object_class === "item_focus") {
itemdb.classList.add("item");
}else {
itemdb.removeAttribute("class");
itemdb.classList.add(toclass);
if(Number.isInteger(fromid/3)) {
itemdb.style.gridColumn = "2 / span 2";
itemdb.style.gridRow = fromid/3 + " / span 2";
}
}
}< /code>
.shop-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 25px;
padding: 25px 10% 25px 10%;
transition: .25s;
}

.item {
background-color: red;
grid-column: span 1;
grid-row: span 1;
width: 100%;
position:relative;
z-index: 5;
overflow: hidden;
cursor: pointer;
}

.item_focus {
background-color: red;
grid-column: span 2;
grid-row: span 2;
width: 100%;
position:relative;
z-index: 5;
overflow: hidden;
cursor: pointer;
}< /code>

box 1
box 2
box 3
box 4
box 5
box 6

Подробнее здесь: https://stackoverflow.com/questions/795 ... structures