Certain CSS Grid tracks are not the same size as others

Im working on a dashboard for the odin project. My github link and the model for the project are below.

I have just learned grid, and I feel like I understand it. What I DO NOT understand is why the grid section represented by class="item3" is not the same size as the other two sections below it :( I've tried removing my subgrid classes and just doing 1 big grid, but I still run into sections that don't match exactly in size, which means I'm not using grid right.

I have also tried variations of the grid-template properties for my .container class that might look like:

grid-template-rows: repeat(16, minmax(80px, 15%)); grid-template-columns: repeat(16, minmax(40px, 10%));

My Github: https://github.com/appredator/TOPProject2_AdminDashboard

Model: https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-admin-dashboard

// CSS
.container{
  display: grid;
  grid-template-rows: repeat(16, 100px);
  grid-template-columns: repeat(16, 100px);
 }
.item1{
  grid-column: 1 / 4;
  grid-row: 1 / 17;
  background-color: rgb(10,100,250);
  margin: -10px 0px 0px -10px;
}
.item2{
   grid-column: 4 / 17;
  grid-row: 1 / 4;
  border-top-style: grey;
}
.dashboard{
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: subgrid;
  grid-column: 4 / 32;
  grid-row: 4 / 32;
  background-color: rgb(52, 413, 250);
  border: solid grey 2px; 
}
#projectHeader{
bottom: 600px;
  position: fixed; 
  align-items: center;
  justify-content: center;
  color: Black;
}
.item3{
  margin: 30px;
  grid-column: 1 / 3;
  grid-row: 1 / 4;
  border: solid grey 2px;
  border-radius: 5px;
    background-color: white;
}

.item5{
  margin: 30px;
grid-column: 1 / 3;
grid-row: 4 / 6;
border: solid grey 2px;
border-radius: 5px;
    background-color: white;
}
.item7{
  margin: 30px;
grid-column: 1 / 3;
grid-row: 6 / 8;
border: solid grey 2px;
border-radius: 5px;
    background-color: white;
}
.announcements{
  display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
grid-column: 3 / 4;
grid-row: 1 / 5;
  margin: 20px;
}
#announcements{
  position: relative;
  bottom: 418px;
  left: 12px;
  align-items: center;
  justify-content: center;    
}
.item9{
margin: 10px;
grid-column: 1 / 3;
grid-row: 1 / 3;
border: solid grey 2px;
border-radius: 5px;
    background-color: white; 
}
.item10{
margin: 10px;
grid-column: 1 / 3;
grid-row: 3 / 5;
border: solid grey 2px;
border-radius: 5px;
    background-color: white;  
}
.item11{
margin: 10px;
grid-column: 1 / 3;
grid-row: 5 / 7;
border: solid grey 2px;
border-radius: 5px;
    background-color: white;  
}
.trending{
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-column: 3 / 4;
  grid-row: 5 / 7;
  position:relative;
  top: 20px
}

// HTML 
<div class="container">
            <div class="item1">Sidebar</div>
            <div class="item2">Header</div>
           
            
            <div class="dashboard">
            <!-- <h3 id="projectHeader">Your Projects</h3> -->
            <div class="item3"></div>
            <!-- <div class="item4"></div> -->
            <div class="item5"></div>
            <!-- <div class="item6"></div> -->
            <div class="item7"></div>
            <!-- <div class="item8"></div> -->
            
            <div class="announcements">
            <h2 id="announcements">Announcements</h2>
            <div class="item9"></div>
            <div class="item10"></div>
            <div class="item11"></div>
           
            </div>
            
            <div class="trending">
            <h2 id="trending">Trending Now</h2>
            <div class="item12">Elon bails on twitter buyout.</div>
            <div class="item13">Pakistan floods devastate families.</div>
            <div class="item14">Inflation hits record high.</div>
            <div class="item15"></div>
            </div>
            </div>