How do I make a complex UI layout with html/css grid?

I'm trying to make this complex layout shown below:

Here's my code:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: posts; }

.grid-container {
  display: grid;
  grid-template-areas:
  'header header header header header header'
  'main main main main main main'
  'menu posts posts posts posts posts';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

<div class="grid-container">
  <div class="item1">Navbar</div>
  <div class="item2">Small Picture</div>
  <div class="item3">Big Picture</div>  
  <div class="item4">Posts</div>
</div>

As you can see, I'm not even close. I'm not sure How I would get the small picture tab (shown in the picture) to be over the Tab Menu and the Big picture in my original layout design. Is this possible with CSS grid? If so, how would I do it?

If it's not possible or too difficult with CSS, what would you recommend I do instead?

Thanks in advance, I really appreciate any help I can get.