Enhancing the buttons with a touch of depth using box-shadow resulted in an unexpected outcome - the shadows bleeding through the gaps and causing uneven spacing.
https://i.sstatic.net/LYssE.png
In an attempt to rectify this issue, I decided to tweak the grid-template-rows:
grid-template-rows: calc(1fr - 10px) calc(1fr - 10px);
However, to my dismay, it seemed like my adjustments had no effect whatsoever.
Here's the snippet of code that showcases this problem:
.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>