如何为Grid容器添加box-shadow？问题排查及解决方法

我是前端领域的新手，这是我首次发帖，目前遇到一个问题：无法为包含3个grid-item的Grid容器添加box-shadow。

• 直接为容器添加box-shadow，没有效果；
• 为所有grid-item添加阴影，出现阴影重叠问题，视觉效果不佳；
• 了解到CSS伪元素方案，但不清楚具体操作步骤。

更新：问题已解决
原因是Grid容器没有父元素，将body作为Grid容器的父元素后问题得以解决。

修正前的容器CSS代码 #

.container {
    display: grid;
    grid-template-columns: minmax(auto,350px) minmax(auto,350px);
    grid-template-rows: auto auto;
    height: 100vh;
    align-content: center;
    justify-content: center;
}

修正后的CSS代码 #

body {
    background-color: hsl(204, 43%, 93%);
    display: grid;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    display: grid;
    grid-template-columns: minmax(auto,350px) minmax(auto,350px);
    grid-template-rows: auto auto;
    box-shadow: 0 10px 8px 0 rgba(0,0,0,0.2);
    border-radius: 10px;
}

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