如何调整CSS Grid单元格高度并解决box-shadow溢出间隙问题？

问题核心在于：box-shadow默认在元素外部绘制，会占用元素之外的空间，而grid-gap是网格项边框之间的间距，因此阴影会延伸到grid-gap区域，造成视觉上的间距不均。修改grid-template-rows无效，因为1fr是基于网格容器的可用空间计算的，calc(1fr - 10px)无法抵消阴影的外部占用空间。

以下是几种可行的解决方案：

方法1：用伪元素模拟阴影（推荐） #

通过绝对定位的伪元素创建下方阴影，伪元素脱离文档流，不会干扰网格布局，同时能完整保留立体感：

.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);
    position: relative; /* 为伪元素提供定位基准 */
}

.cont>div::after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%; /* 定位到元素正下方 */
    width: 100%;
    height: 10px; /* 阴影高度 */
    background: rgb(160, 25, 25);
}

方法2：调整网格间距与元素外边距 #

将原grid-gap减去阴影高度，同时给网格项添加底部外边距，保证总视觉间距与原需求一致：

.cont {
    display: grid;
    padding: 20px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 10px; /* 原20px减去阴影高度10px */
    width: 250px;
    height: 250px;
    background: black;
}

.cont>div {
    background: rgb(206, 34, 34);
    box-shadow: 0 10px 0 rgb(160, 25, 25);
    margin-bottom: 10px; /* 补充阴影高度的外边距 */
}

方法3：裁剪溢出阴影（不推荐） #

若可以接受阴影被部分裁剪，给网格容器添加overflow: hidden，但会丢失元素底部的阴影效果：

.cont {
    display: grid;
    padding: 20px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 20px;
    width: 250px;
    height: 250px;
    background: black;
    overflow: hidden; /* 裁剪溢出的阴影 */
}

.cont>div {
    background: rgb(206, 34, 34);
    box-shadow: 0 10px 0 rgb(160, 25, 25);
}

内容的提问来源于stack exchange，提问作者Coder100