当从网格中的3个元素转换为2个html网格时，将第3个元素居中2个元素之下

Question

我正在尝试弄清楚如何将第3个div居中。所以在全宽上我在网格中有3个盒子。它们的宽度为400px。当宽度为1220px时，它将连续变成2个框。因此，我的第三个方框位于左侧。我如何居中而不破坏宽度。因为我尝试了margin：0 auto;而且它的宽度和里面的东西一样宽。

这是我的代码：

<div class="block bg-success">
    <h1>Projects</h1>
    <div class="wraper">
        <div class="box">A</div>
        <div class="box">B</div>
        <div class="box">C</div>
    </div>
</div>

css：
.wraper{
    display: grid;
    grid-template-columns: 400px 400px 400px;
    grid-gap: 10px;
    grid-template-columns: repeat(3, 400px);
}

.box{
    background-color: red;
    height: 200px;
}

@media (max-width: 1220px) {
    .wraper{
        grid-template-columns: repeat(2, 400px);
    }

}

@media (max-width: 810px) {
    .wraper{
        grid-template-columns: repeat(1, 400px);
    }
}

@media (max-width: 400px) {
    .wraper{
        grid-template-columns: repeat(1, 300px);
    }
}

Answer 1

在您的1220px媒体查询中，添加一条规则以使第三格居中。

@media (max-width: 1220px) {
  .wraper {
    grid-template-columns: repeat(2, 400px);
  }

  .box:last-child {
    grid-column: 1 / 3;
    justify-self: center;
    width: 400px;
  }
}

jsFiddle demo
 
.wraper {
  display: grid;
  grid-template-columns: 400px 400px 400px;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 400px);
}

.box {
  background-color: red;
  height: 200px;
}

@media (max-width: 1220px) {
  .wraper {
    grid-template-columns: repeat(2, 400px);
  }

   /* NEW */
  .box:last-child {
    grid-column: 1 / 3;
    justify-self: center;
    width: 400px;
  }
}

@media (max-width: 810px) {
  .wraper {
    grid-template-columns: repeat(1, 400px);
  }

   /* RESET */
  .box:last-child {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
}

@media (max-width: 400px) {
  .wraper {
    grid-template-columns: repeat(1, 300px);
  }
}
<div class="block bg-success">
  <h1>Projects</h1>
  <div class="wraper">
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
  </div>
</div>