<!DOCTYPE html>
<style>

.grid {
    display: grid;
    grid: 50px 50px / 50px 50px;
    position: relative;
}

.green {
    background: green;
}

.red {
    background: red;
}

#item {
    position: absolute;
    width: 100%;
    height: 100%;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
</style>

<p>This test checks that positioned items can be dynamically changed.</p>
<p>The test passes if you see a 100x100 green square and no red.</p>

<div class="grid">
    <div class="green"></div>
    <div class="green"></div>
    <div class="green"></div>
    <div class="red"></div>
    <div id="item" class="green"></div>
</div>

<script>
document.body.offsetLeft;

var item = document.getElementById("item");
item.style.gridColumn = "2 / 3";
item.style.gridRow = "2 / 3";
</script>