JSFiddle - React, Tailwind, and code Playground

by mattopen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<html>
    <head>
        <style>
            .container {
                display: grid;
                grid-gap: 10px;
                background-color: blue;
                grid-template-columns: repeat(6, 1fr);
                height: 400px;
            }
            .container div {
                background-color: green;
            }
            .grid-stack-item {
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="2" data-gs-height="1">
                <div class="grid-stack-item-content">1</div>
            </div>
            <div class="grid-stack-item" data-gs-x="2" data-gs-y="0" data-gs-width="2" data-gs-height="2">
                <div class="grid-stack-item-content">2</div>
            </div>
            <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="1" data-gs-height="1">
                <div class="grid-stack-item-content" style="overflow: hidden">3</div>
            </div>
            <div class="grid-stack-item" data-gs-x="5" data-gs-y="0" data-gs-width="1" data-gs-height="1">
                <div class="grid-stack-item-content"> 4</div>
            </div>
            <div class="grid-stack-item" data-gs-x="0" data-gs-y="1" data-gs-width="1" data-gs-height="1">
                <div class="grid-stack-item-content">5</div>
            </div>
            <!--<div class="grid-stack-item" data-gs-x="1" data-gs-y="1" data-gs-width="1" data-gs-height="2">
                <div class="grid-stack-item-content">6</div>
            </div>-->

            <div class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="1" data-gs-height="1">
                <div class="grid-stack-item-content">8</div>
            </div>
            <div class="grid-stack-item" data-gs-x="2" data-gs-y="2" data-gs-width="2"...

CSS

.pseudoContainer{
  position:absolute;
  top:10px;
  left:10px;
  width: 100%;
      height: 400px;
  display: grid;
   z-index:1;
   grid-template-columns: repeat(6, 1fr);
   grid-gap: 0px;
}
.pseudoitem{
  
    z-index:2;
}
.pseudoitem-inner{
    height: 100%;
    width: 100%;
}
.container{
  z-index:1;
}
.grid-stack-item{
  z-index:3;
}

JavaScript

var cont = $(".pseudoContainer");
var y,x;
var repeat = 6;
var rows = 3;
for (var i = 0; i < rows*repeat; i++) {
  
  if(i%repeat === 0) {
    y = i/repeat;
  }
  x = i- y * repeat;
  
  var newDiv = document.createElement("div");
  newDiv.setAttribute('class', 'pseudoitem');
  newDiv.setAttribute('data-gs-width', '1');
  newDiv.setAttribute('data-gs-height', '1');
  newDiv.setAttribute('data-gs-x', x);
  newDiv.setAttribute('data-gs-y', y);
  newDiv.innerHTML = '<div class="pseudoitem-inner"></div>';
  cont.append(newDiv);
}

for(let elm of document.getElementsByClassName('pseudoitem')){
            elm.style['grid-column-start'] = parseInt(elm.getAttribute('data-gs-x')) + 1;
            elm.style['grid-column-end'] = parseInt(elm.getAttribute('data-gs-x')) + parseInt(elm.getAttribute('data-gs-width')) + 1;
            elm.style['grid-row-start'] = parseInt(elm.getAttribute('data-gs-y')) +1 ;
            elm.style['grid-row-end'] = parseInt(elm.getAttribute('data-gs-y')) + parseInt(elm.getAttribute('data-gs-height')) +1;
        }


let currentCellPosition = {
  "grid-row-start": null,
  "grid-row-end": null,
  "grid-column-start": null,
  "grid-column-end": null
}

Array.from(document.getElementsByClassName("pseudoitem")).forEach(element => {
  element.addEventListener("mouseenter", () => {
    const style = window.getComputedStyle(element);
    currentCellPosition = {
      "grid-row-start": style.gridRowStart,
      "grid-row-end": style.gridRowEnd,
      "grid-column-start": style.gridColumnStart,
      "grid-column-end": style.gridColumnEnd
    }
    console.log(currentCellPosition);
  })
})