Есть ли способ задать начало строки / столбца сетки, например: [имя линии] + 2?

Question

Допустим, я хочу поместить div в эту сетку для примера grid-row: 3 / span 1, а в JavaScript у меня есть переменная с неизвестным номером(для примера unknownNumber, и я хочу grid-column: line3 + unknownNumber / span 1. Так что если unknownNumber = 1, тогда поместите div, как показано в красной области. Это возможно?

Answer 1

Не уверен, что это то, что вы имели в виду, но вот что у меня есть:

Вот ручка,

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>