如何偏移css网格中的div

Question

这是可能的“偏移”一个div在CSS网格的图像中？

Answer 1

考虑负边际：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 500px;
  height: 200px;
  border: 1px solid;
}

.box {
  grid-column: 2/3;
  margin-left: -20px;
  margin-right: -80px;
  background: red;
}
.box-alt {
  grid-column: 2/3;
  grid-row:2;
  background: blue;
}

<div class="container">
  <div class="box"></div>
  <div class="box-alt"></div>
</div>