Как плавно перемещать элемент с места на место с помощью сетки отображения? ⇐ CSS

[Anonymous]

У меня на странице два изображения: одно в первой строке и одно во второй, чтобы изображения выглядели разбросанными. Я добавил кнопку, при нажатии которой изображения будут перемещаться только в одну строку, показывая, что она упорядочена.
Я черпал вдохновение на этом сайте: https://www.phsofia. com/photoset/karina. Я пытался скопировать кнопку «Изменить вид».
Мой код на данный момент:

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

var btn_arrange = document.getElementById("btn-gallery-arrange");
var gallery = document.getElementById("gallery");
var gallery_img = gallery.querySelectorAll("img");
var img_Array = Array.from(gallery_img);

btn_arrange.addEventListener("click",function(){
img_Array.forEach(function(el){
el.style.gridRow = "1";
el.style.gridColumn = "span 1";
});
},false);

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

#one{
grid-row: 1;
grid-column: 2/3;
transition: 1s;
}
#two{
grid-row: 2;
grid-column: 3/5;
transition: 1s;
}
#gallery{
display: grid;
transition: 1s;
}

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

arrange!

[img]https://picsum.photos/200/300[/img]

[img]https://picsum.photos/200/300[/img]

Проблема: элемент Image телепортируется в новый место после нажатия кнопки.
Пропробовал: я попробовал добавить к изображениям свойство перехода, ожидая, что они будут плавно переходить на новые места.< /п>

Подробнее здесь: https://stackoverflow.com/questions/783 ... splay-grid