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

#mybut {
background-color: yellow;
}

td {
width: 600px;
height: 1200px;
}
</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';
var snapshotcnt=0;
var lastsd='', thissd='';

function postpostld() {
document.getElementById('myh1').innerHTML='<sp' + 'an' + document.getElementById('myh1').innerHTML.split('<sp' + 'an')[1];
top.location.href='#myh1';
}

function postld() {
if (window === top) {
thissd=thissd;
} else if (top.document.URL.indexOf('/div_grid_rearrange.htm') != -1) {
document.getElementById('thistory').style.display='none';
// mybut goes here
setTimeout(postpostld, 6000); //top.location.href='#myh1';
}
}

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));
if (window === top) {
thissd='<html>' + document.head.outerHTML + '<body onload="onl(); document.getElementById(' + "'" + 'thistory' + "'" + ').style.display=' + "'" + 'none' + "'" + '; document.getElementById(' + "'" + 'mybut' + "'" + ').scrollIntoView();">' + document.body.innerHTML + '</body></html>';
if (thissd != lastsd) {
snapshotcnt++;
document.getElementById('trone').innerHTML+='<td id=td' + snapshotcnt + '><iframe style="width:100%;height:100%;" id=if' + snapshotcnt + ' srcdoc=""' + '></iframe></td>';
lastsd='<html>' + document.head.outerHTML + '<body onload="onl(); document.getElementById(' + "'" + 'mybut' + "'" + ').scrollIntoView();">' + document.body.innerHTML + '</body></html>';
if (snapshotcnt == 1) {
//if (lastsd.indexOf(">" + "</span>") != -1) { alert('Here ' + ">Move item1 to be 1 / span 2</span> " + lastsd.replace(">" + "</span>", ">Move item1 to be 1 / span 2</span>").split('</h' + '1>')[0].slice(-100)); }
document.getElementById('if' + snapshotcnt).srcdoc=lastsd.replace("/" + "/ mybut goes here", "document.getElementById('mybut').innerHTML='Move item" + one + " to be " + rto + "';").replace(">" + "</span>", ">Move item1 to be 1 / span 2</span>").replace('#2' + '19' + '6F3', '#9621F3');
} else {
document.getElementById('if' + snapshotcnt).srcdoc=lastsd.replace("/" + "/ mybut goes here", "document.getElementById('mybut').innerHTML='Move item" + one + " to be " + rto + "';").replace(">" + "</span>", ">" + document.getElementById('mybut').innerHTML + "</span>").replace('#2' + '19' + '6F3', '#9621F3');
}
}
}
if (window === top) {
document.getElementById("mybut").innerHTML='Move item' + one + ' to be ' + rto;
} else if (top.document.URL.indexOf('/div_grid_rearrange.htm') == -1) {
document.getElementById("mybut").innerHTML='Move item' + one + ' to be ' + rto;
document.getElementById("cbsh").style.visibility='hidden'; //.readOnly=true;
}
}

setTimeout(postld, 3000);
</script>
</head>
<body onload=onl();>

<h1 id=myh1>Change grid-column with JavaScript <span id=smore></span></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 and/or <input type=checkbox id=cbsh onclick="document.getElementById('thistory').style.display='block';"></input> show history</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 id=topopt 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 id=topopt 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>
<hr>
<table id=thistory style='display:none;' border=5><tr id=trone></tr></table>
<div id=anima></div>
</body>
</html>