CSS网格-一个块与另一个块不同

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>