我用box-shadow给按钮增加了一些深度，正如你在下面看到的，但是它从缝隙中渗出，使间距不均匀.
最初，我试图更改grid-template-rows以说明这一点:
grid-template-rows: calc(1fr - 10px) calc(1fr - 10px);
但它似乎并没有起到任何作用.
最小代码示例:
.cont {
display: grid;
padding: 20px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
width: 250px;
height: 250px;
background: black;
}
.cont>div {
background: rgb(206, 34, 34);
box-shadow: 0 10px 0 rgb(160, 25, 25);
}<div class="cont">
<div></div>
<div></div>
<div></div>
<div></div>
</div>