Grid Layout Overlapping Row with full height

Question

I have started using Grid CSS and i am stuck in building a Layout using Grid system. I am looking to build a layout where the column would overlap a row and take full height. I have attached a screenshot of the layout and what i have tried so far.

body {
  margin: 40px;
}

.sidebar {
    grid-area: sidebar;
  }

  .content {
    grid-area: content;
  }

  .header {
    grid-area: header;
  }


  .wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 120px 120px 120px;
    grid-template-areas:
    "header  header  header" 
    "sidebar content content";
    background-color: #fff;
    color: #444;
  }

  .box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;

  }

  .header {
    background-color: #999;
  }

  .overlay {
    background-color: red;
    z-index: 10;
    grid-column: content-start / content-end;
    grid-row: header-start / content-end;
  }

<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>

  <div class="overlay">Content</div>
</div>

Answer 1

Depending on how you want to overlap the following code works, but need to be adapted:

There's a lot of other way to do this...

body {
  margin: 40px;
}

.sidebar {
    grid-area: sidebar;
  }

  .content {
    grid-area: content;
  }

  .header {
    grid-area: header;
  }


  .wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 120px 120px 120px;
    grid-template-rows: 30px 30px auto auto;
    grid-template-areas:
    "header  header  header" 
    "sidebar content content";
    background-color: #fff;
    color: #444;
  }

  .box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;

  }

  .header {
    background-color: #999;
    grid-row: 1 / 3;
  }
  .sidebar {
    background-color: red;
    z-index: 10;
    grid-row: 2 / 4;
    height: 300px;
  }
  .overlay {
    background-color: red;
    z-index: 10;
    grid-column: content-start / content-end;
    grid-row: 3 / 4;
  }

<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>

  <div class="overlay">Content</div>
</div>