有没有办法设置网格行/列开始像：[行名] + 2？

Question

让我们说，我想在此网格中放置一个div作为grid-row: 3 / span 1的示例，在javascript中，我有一个未知数字的变量（例如unknownNumber ，我想要grid-column: line3 + unknownNumber / span 1。所以，如果是unknownNumber = 1，那么就像红色区域一样放置div。它可能吗？

Answer 1

不确定这是不是你的意思，但这就是我所拥有的：

这是Pen，

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>