【发布时间】：2018-09-18 17:02:26
【问题描述】：
我正在处理投资组合页面，我想我会添加一些证书。我制作了一个网格，并使用了{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>【问题讨论】：
-
它按预期工作