No se como lo tienes diagramado porque no pones codigo pero en este ejemplo, la forma tradicional por asi decirlo las sombras quedan por detras
*{
box-sizing: border-box;
}
.card{
width: 200px;
height: 300px;
background-color: aqua;
box-shadow: 30px 30px 10px #00000099;
display: inline-block;
margin: 5px;
}
<div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
<div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
<div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
</div>
EDITADO:
Pues da lo mismo si usas display grid en un contenedor padre:
*{
box-sizing: border-box;
}
.card{
width: 200px;
height: 300px;
background-color: aqua;
box-shadow: 30px 30px 10px #00000099;
display: inline-block;
margin: 5px;
}
.padre{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
<div class="padre">
<div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
<div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
<div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
<div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
<div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
<div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
<div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
<div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
<div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
<div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
<div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
<div class="card"><img src="https://placeimg.com/200/300/any" alt=""></div>
</div>
Ahi lo tienes, con grid responsive incluida...