Making two columns with position relative and position absolute

Question

I want to emulate the next CSS grid structure with CSS position absolute and relative:

...
grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
... 

I want that cause I use a library called Muuri, and in order to uses its functionality I need to avoid CSS Grid and Flexbox. This is my HTML Skeleton:

...
<section class="grid">
            
            
        </section>
...

I generate the content of the section with JavaScript with this:

...
const myWork = document.querySelector('.grid');
console.log(myWork);
for(let i = 1; i <= 6; i++) {
    const item = document.createElement('DIV');
    item.classList.add('item');
    const gallery = document.createElement('DIV');
    gallery.classList.add('item-content');
    const img = document.createElement('IMG');
    img.src = `img/${i}.png`;
    img.alt = `${i}`;
    img.classList.add(`image${i}`);
    gallery.append(img);
    item.append(gallery);
    myWork.append(item);
}
...

And this is my CSS:

...
.grid {
    
    position: relative;
    width: 100%;
}
/* grid */
.grid .item {
    position: absolute;
    display: block;
    padding: 0;
    margin: 10px;
    width: calc(50% - 20px);
    height: 50%;
}

.grid .item img {
    width: 100%;
    cursor: pointer;
    vertical-align: top;
}
...

And my problem is the result, all the images are in the same space one above the other, don't take the display: block; and I don't know why.Maybe is something relate to the position, that's why the title.