<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}

.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}

.item1 {
grid-column: 1 / span 2;
}
</style>
<script>
var was=['1 / span 1','1 / span 2','3 / span 1','4 / span 1','1 / span 1','2 / span 1','3 / span 1','4 / span 1'];
var mmcnt=0;
var one=1;
var rto='2 / span 2';

function onl() {
one=Math.max(1,Math.min(eval(-1 + eval('' + document.getElementsByTagName('div').length)),Math.floor(Math.random() * eval(-1 + eval('' + document.getElementsByTagName('div').length)))));
rto='' + Math.max(1,Math.floor(Math.random() * 4)) + ' / span ' + Math.max(1,Math.floor(Math.random() * 4));
document.getElementById("mybut").innerHTML='Move item' + one + ' to be ' + rto;
}
</script>
</head>
<body onload=onl();>

<h1>Change grid-column with JavaScript</h1>
<h3>Thanks to <a target=_blank title='https://www.w3schools.com/cssref/pr_grid-column.asp' href='//www.w3schools.com/cssref/pr_grid-column.asp'>https://www.w3schools.com/cssref/pr_grid-column.asp</a></h3>

<p>Click the button to rearrange the position of an item <input type=checkbox id=cbanima></input> with animation</p>
<p><button onclick="myFunction()" id=mybut>Move item1</button> <select onchange="if (this.value.length > 0) { one=this.value.split(':')[0]; rto=this.value.split(':')[1]; document.getElementById('mybut').innerHTML='Move item' + one + ' to be ' + rto; myFunction(); }" style=display:inline-block; id=mysel></select></p>

<div class="grid-container">
<div class="item1" id="myDIV1">1</div>
<div class="item2" id="myDIV2">2</div>
<div class="item3" id="myDIV3">3</div>
<div class="item4" id="myDIV4">4</div>
<div class="item5" id="myDIV5">5</div>
<div class="item6" id="myDIV6">6</div>
<div class="item7" id="myDIV7">7</div>
</div>

<script>
function myFunction() {
if (document.getElementById('cbanima').checked) {
mmcnt++;
if (('' + document.getElementById("myDIV" + one).style.gridColumn) == '') {
document.getElementById('anima').innerHTML+='<style> #' + "myDIV" + one + ' { animation: mymove' + mmcnt + ' 2s 2; } @keyframes mymove' + mmcnt + ' { from {grid-column: ' + was[eval('' + one)] + '; background-color: rgba(255, 255, 255, 0.2);} to {grid-column: ' + rto + '; background-color: rgba(255, 255, 255, 0.8);} } </style>';
} else {
document.getElementById('anima').innerHTML+='<style> #' + "myDIV" + one + ' { animation: mymove' + mmcnt + ' 2s 2; } @keyframes mymove' + mmcnt + ' { from {grid-column: ' + ('' + document.getElementById("myDIV" + one).style.gridColumn) + '; background-color: rgba(255, 255, 255, 0.2);} to {grid-column: ' + rto + '; background-color: rgba(255, 255, 255, 0.8);} } </style>';
}
setTimeout(postonl, 2200);
} else {
document.getElementById("myDIV" + one).style.gridColumn = rto;
if (document.getElementById("mysel").innerHTML == '') {
document.getElementById("mysel").innerHTML+='<option value="">Please review and/or replay movements</option>';
}
document.getElementById("mysel").innerHTML+='<option value="' + one + ':' + rto + '">' + document.getElementById("mybut").innerHTML + '</option>';
onl();
}
}

function postonl() {
document.getElementById("myDIV" + one).style.gridColumn = rto;
if (document.getElementById("mysel").innerHTML == '') {
document.getElementById("mysel").innerHTML+='<option value="">Please review and/or replay movements</option>';
}
document.getElementById("mysel").innerHTML+='<option value="' + one + ':' + rto + '">' + document.getElementById("mybut").innerHTML + '</option>';
for (var ij=0; ij<was.length; ij++) {
was[ij]='';
}
onl();
}
</script>

<div id=anima></div>
</body>
</html>