Box Shadow on a css grid area

Question

I have a sidebar in a grid area that I am trying to apply a box shadow to. It appears to not work. Something I can do for a workaround?

#wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "sidebar content";
    height: 100%;
    @include media-breakpoint-down(sm) {
        grid-template-columns: auto;
        grid-template-areas: "sidebar" "content";
    }
}

#sidebar {
    grid-area: sidebar;
    background: $white;
    box-shadow: 2px 2px 2px black; //this doesn't work
    padding: 2rem 1rem;
    .nav-title {
        display: none;
    }
    &.show {
        min-width: 250px;
        .nav-title {
            display: inline;
            margin-left: .5rem;
        }
    }
    @include media-breakpoint-down(sm) {
        display: none;
        &.show {
            padding: .5rem .5rem;
            display: block;
        }
    }
}

#content {
    grid-area: content;
    background-color: #e9f2f7;
}

Can't seem to find anything in the documentation saying this won't work although border-right seems to work

Answer 1

keep in mind few things and play with them. 1. box-sizing 2. z-index

and, here is the working demo

https://codepen.io/fearless23/pen/yEjGOe?editors=1100

Code:

HTML:

<section>
  <header></header>
  <aside></aside>
  <main></main>
</section>

CSS:

section {
  display: grid;
  grid-template-columns: 10.18em 1fr;
  grid-template-rows: 3em 1fr;
  grid-template-areas: "header header" "sidebar content";
  height: 100vh;
}

header {
  box-sizing: border-box;
  grid-area: header;
  background: #00a8e8;
  padding: 1rem 1rem;
}

aside {
  grid-area: sidebar;
  background: #f5f5f5;
  z-index: 100;
  box-shadow: 3px 0px 2px rgba(0,0,0,0.5); 
  padding: 2rem 1rem;
}

main {
  grid-area: content;
  background-color: #efefef;
  padding: 2rem 1rem;
}

Answer 2

Try to set position: relative; for that area with shadow in the grid.

.my_grid {
  display: grid;
}

.shadowed_panel {
  box-shadow: 10px 5px 5px grey;
  position: relative;
}