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

【问题标题】：Is there a way to set a grid row/column start like: [line name] + 2?有没有办法设置网格行/列开始，如：[行名] + 2？
【发布时间】：2018-05-25 13:27:12
【问题描述】：

假设，我想在这个网格中放置一个 div，例如 grid-row: 3 / span 1，在 javascript 中，我有一个未知数字的变量（例如 unknownNumber，我想要 grid-column: line3 + unknownNumber / span 1 .所以如果unknownNumber = 1，那么像红色区域显示的那样放置div。有可能吗？

【问题讨论】：

标签： javascript css grid css-grid

【解决方案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>

【讨论】：

是的。 JavaScript 库 jQuery。