如何在CSS网格中偏移div

Question

可以在 css网格中“ 偏移” 一个div ，如图所示？

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>

Answer 2

<div class="container">
    <div class="area1"></div>
    <div class="area2"></div>
</div>

.container{
    display: grid;
    grid-template: 1fr / repeat(3, 1fr);
    grid-template-areas: "area1 offset area2";
}
.area{
    width: 100%;
    height: 40px;
}
.area1{
    background-color: red;
}
.area2{
    background-color: yellow;
}

Answer 3

使用您可以在网格上方管理的引导程序列

  .row {
        border: 2px solid #c35a5a;
    }
    .black {
        background-color: #000;
        height: 70px;
        width: 100%;
    }
    .blue {
        background-color: #0051ff;
        height: 70px;
        width: 100%;
    }
    .red {
        background-color: #ff003e;
        height: 70px;
        width: 100%;
    }
    .blank {
      background-color: #fff;
      height: 70px;
      width: 100%;
    }
    .padding-1 {
        padding: 1px !important;
    }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <div class="container">
          <div class="row">
            <div class="col-md-2 col-sm-2 col-xs-2 padding-1">
              <div class="blank"></div>
            </div>
            <div class="col-md-8 col-sm-8 col-xs-8 padding-1">
              <div class="black"></div>
            </div>
            <div class="col-md-2 col-sm-2 col-xs-2 padding-1">
              <div class="blank"></div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-4 padding-1">
              <div class="red"></div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-4 padding-1">
              <div class="black"></div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-4 padding-1">
              <div class="blue"></div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-4 padding-1">
              <div class="blue"></div>
            </div>
             <div class="col-md-4 col-sm-4 col-xs-4 padding-1">
              <div class="red"></div>
            </div>
             <div class="col-md-4 col-sm-4 col-xs-4 padding-1">
              <div class="black"></div>
            </div>
          </div>
        </div>