我使用了一個盒子陰影來增加按鈕的深度，正如你在下面看到的，但是它會從縫隙中“出血”,使得間隔不均勻。

最初，我試圖更改網格模板行來解決這個問題:

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>

使用嵌入陰影:

.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) inset;
}

<div class="cont">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

您可以分別設置行間距和列間距:

.cont {
    display: grid;
    padding: 20px 20px 30px 20px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    row-gap: 30px;
    column-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>