[行名] + 2のようなグリッドの行/列の開始を設定する方法はありますか？

これがあなたが意図したものかどうかはわかりませんが、ここに私が持っているものがあります：

これがペンです

https://codepen.io/RealTimeStrategy/pen/qYzgaq

var x = 2;
var y = parseInt($('.table-row4').css('grid-column-start'));
var z = x + y;
console.log(z);
$('.table-row4').css('grid-column-start', '' + z + '');
y = parseInt($('.table-row4').css('grid-column-start'));
$('.table-row4').css('background-color', 'blue').css('color', 'white');
console.log(y);

.wrapper {
  display: grid;
  grid-template-columns: repeat(8, [col-start] 1fr);
  justify-content: space-between;
  border: 1px solid black;
}
.table-row1 {
  grid-column: 1 / span 2;
}
.table-row2 {
  grid-column: 2 / span 1;
}
.table-row3 {
  grid-column: 3 / span 1;
}
.table-row4 {
  grid-column: 4 / span 1;
  border: 3px solid red;
}
.table-row5 {
  grid-column: 5 / span 1;
}
.table-row6 {
  grid-column: 6 / span 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="table-row1">
    line1
  </div>
  <div class="table-row2">
    line2
  </div>
  <div class="table-row3">
    line3
  </div>
  <div class="table-row4">
    line4
  </div>
  <div class="table-row5">
    line5
  </div>
  <div class="table-row6">
    line6
  </div>
</div>