JSFiddle - React, Tailwind, and code Playground

HTML

<div id="grid">
  <div class="cell">
  </div>

  <div class="cell">
  </div>

  <div class="cell">
  </div>

  <div class="cell">
  </div>
</div>

CSS

#grid {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 2px;
  width: 200px;
  height: 200px;
}

.cell{
  background: grey;
}

JavaScript

$(function(){
  $(".cell").each(function (index) {
      $(this).text(index); // for debugging

      var col = index % 2; // 2 is the column count, hardcoded.
      var row = Math.floor(index / 2); // ditto

      $(this).css({"grid-area": (row + 1) + " / " + (col + 1) + " / span 1 / span 1"});
  });

	console.log($(".cell").first().css("grid-row"));
})