CSS Grid - 一个块与其他块不同

Question

我正在投资组合页面，我想我会添加一些证书。我制作了一个网格，并使用了{grid-row-gap: 50px;}，它已经在网格中的其他块上工作。但其中一个并没有落实到位。

最后一个块（.cert5）的上边距比其他块大。

我将把代码放在下面，这样你就可以看到我到目前为止所做的事情：（SideNote - 我是编码的新手，所以我可能写的不太优雅。）

这是CSS和HTML：

.certcontainer {
  background-color: hsl(120, 30%, 40%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  grid-row-gap: 50px;

  justify-items: center;
  width: auto;
  height: auto;
  margin-top: 0;
  margin-left: -10px;
  margin-right: -8px;
}
.cert1 {
  border: 30px solid transparent;
  border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) 100 repeat;
  width: 400px;
  height: 247px;
  margin-top: 80px;
}
.cert2 {
  border: 30px solid transparent;
  border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) 100 repeat;
  width: 400px;
  height: 247px;
  margin-top: 80px;
}
.cert3 {
  border: 30px solid transparent;
  border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) 100 repeat;
  width: 400px;
  height: 247px;
}
.cert4 {
  border: 30px solid transparent;
  border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) 100 repeat;
  width: 400px;
  height: 247px;
}
.cert5 {
  border: 30px solid transparent;
  border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) 100 repeat;
  width: 400px;
  height: 247px;
}

<div class="certcontainer">
  <div class="cert1"><img src="https://www.sololearn.com/Certificate/1014-9937677/jpg" style="width:400px;height:250px;"></img></div>
  <div class="cert2"><img src="https://www.sololearn.com/Certificate/1023-9937677/jpg" style="width:400px;height:250px;"></img></div>
<div class="cert3"><img src="https://screenshotscdn.firefoxusercontent.com/images/463d568d-c08c-4988-be12-3858533a829a.png" style="width:400px;height:250px;"></img></div>
  <div class="cert4"><img src="https://screenshotscdn.firefoxusercontent.com/images/55899e8e-948b-4a31-9df8-5c04946b16f4.png" style="width:400px;height:250px;"></img></div>
  <div class="cert5"><img src="https://screenshotscdn.firefoxusercontent.com/images/fe337c4f-c92f-41e2-bd8d-262cc70c6150.png" style="width:400px;height:250px;"></img></div>
</div>

Answer 1

从margin-top和cert1中删除cert2并在padding-top中添加certcontainer以达到目的 - 请参阅下面的演示：

.certcontainer {
  background-color: hsl(120, 30%, 40%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  grid-row-gap: 50px;

  justify-items: center;
  width: auto;
  height: auto;
  margin-top: 0;
  margin-left: -10px;
  margin-right: -8px;
  padding-top: 80px; /* ADDED */
}
.cert1 {
  border: 30px solid transparent;
  border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) 100 repeat;
  width: 400px;
  height: 247px;
  /*margin-top: 80px;*/
}
.cert2 {
  border: 30px solid transparent;
  border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) 100 repeat;
  width: 400px;
  height: 247px;
  /*margin-top: 80px;*/
}
.cert3 {
  border: 30px solid transparent;
  border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) 100 repeat;
  width: 400px;
  height: 247px;
}
.cert4 {
  border: 30px solid transparent;
  border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) 100 repeat;
  width: 400px;
  height: 247px;
}
.cert5 {
  border: 30px solid transparent;
  border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) 100 repeat;
  width: 400px;
  height: 247px;
}

<div class="certcontainer">
  <div class="cert1"><img src="https://www.sololearn.com/Certificate/1014-9937677/jpg" style="width:400px;height:250px;"></img></div>
  <div class="cert2"><img src="https://www.sololearn.com/Certificate/1023-9937677/jpg" style="width:400px;height:250px;"></img></div>
<div class="cert3"><img src="https://screenshotscdn.firefoxusercontent.com/images/463d568d-c08c-4988-be12-3858533a829a.png" style="width:400px;height:250px;"></img></div>
  <div class="cert4"><img src="https://screenshotscdn.firefoxusercontent.com/images/55899e8e-948b-4a31-9df8-5c04946b16f4.png" style="width:400px;height:250px;"></img></div>
  <div class="cert5"><img src="https://screenshotscdn.firefoxusercontent.com/images/fe337c4f-c92f-41e2-bd8d-262cc70c6150.png" style="width:400px;height:250px;"></img></div>
</div>