<div class="board-grid">
  <div class="rowGrid">
  <div class="board__item"></div>
  <div class="board__item"></div>
  <div class="board__item"></div>
  <div class="board__item"></div>
  </div>
  <div class="rowGrid">
  <div class="board__item"></div>
  <div class="board__item"></div>
  <div class="board__item"></div>
  <div class="board__item"></div>
  </div>
  <div class="rowGrid">
  <div class="board__item"></div>
  <div class="board__item"></div>
  <div class="board__item"></div>
  <div class="board__item"></div>
  </div>
  <div class="rowGrid">
  <div class="board__item"></div>
  <div class="board__item"></div>
  <div class="board__item"></div>
  <div class="board__item"></div>
  </div>
  <div class="rowGrid">
  <div class="board__item"></div>
  <div class="board__item"></div>
  <div class="board__item"></div>
  <div class="board__item"></div>
  </div>
</div>

.board-grid {
  display: grid;
  grid-template-columns: repeat(4, 116px);
    grid-template-rows: repeat(15, 42px);
    grid-row-gap: 4px;
    grid-column-gap: 8px;
}

.board__item {
  background: #eee;
  opacity: 1;
}
.rowGrid {
  display: contents;
}

$(".board__item").hover(function () {
    $(this).css("background", "#484848");
$(this).siblings(".board__item").css("background", "#484848");
  var serial = $(this).index();
  $(".rowGrid").each(function() { $(this).children().eq(serial).css("background", "#484848");
  });
}, 
function () {
     $(this).css("background", "#eee");   $(this).siblings(".board__item").css("background", "#eee");
  var serial = $(this).index();
  $(".rowGrid").each(function() { $(this).children().eq(serial).css("background", "#eee");
  });
});