How to make sidebar and sections with CSS grid?

I'm trying to make a layout like this:

Here's my code:

.grid{
  display: grid;
  background: gray;
  grid-gap: 15px;
  justify-content: center
  align-items: center;
  grid-template-columns: repeat(2, auto);
  grid-auto-rows: minmax(50px, auto);
}

.sidebar{
  grid-column: 1/2;
  background-color: white;
  align-items: center;
  justify-content: center;
  width: 300px;
}

.navbar{
    grid-column: 2/3;
  background-color: white;
  height: 50px;

}
.section2{
    grid-column: 2/3;
  background-color: white;
  height: 300px;

}
.section4{
    grid-column: 2/3;
  background-color: white;
    height: 300px;
}

.section3{
  grid-column: 1/2;
  background-color: white;
  height: 200px;
    align-items: center;
  width: 300px;
}

.section5{
  grid-column: 1/2;
  background-color: white;
    height: 100px;
  align-items: center;
  width: 300px;

}

<div class="grid">
  <div class="sidebar">sidebar</div>
  <div class="navbar">navbar</div>
  <div class="section2">section2</div>  
  <div class="section3">section3</div>
  <div class="section4">section4</div>
  <div class="section5">section5</div>
</div>

The output is shown here:

I highlighted in red some big problems, I have these massive gaps in between sections, and my columns aren't being centered in the grid I tried adding "justify-content: center" and "align-items: center" but none of those centered the sidebar sections and I have no clue how to reduce the gap in between the sections. How can I fix my code so it looks more like the layout in my mockup?

Thanks in advance!