CSS 网格 - 一个方块与其他方块不同

Question

我正在制作作品集页面，我想我应该添加一些证书。我制作了一个网格，并使用了 {grid-row-gap: 50px;} ，它在网格内的其他块上起作用。但是其中一个没有落到位。

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

我将把代码放在下面，这样你就可以看到我到目前为止做了什么：（旁注 - 我是编码新手，所以我写的可能不是很优雅。）

这里是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

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

.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>

CSS 网格 - 一个方块与其他方块不同

CSS Grid - One block is not the same as the others

html

css

margin

css-grid