How to target specific elements for custom layout with CSS Grid?

I need to reproduce this design with CSS Grid and I'm trying to target specific grid elements to get the result without success.

This is what I have at the moment, I need to fix some stuff but I want to get the structure right before.

Attaching code snippet:

.grid-container {
  display: grid;
  grid-template-columns: repeat(13, minmax(30px, auto));
  gap: 30px;
}

.grid-item {
  background-color: red;
  height: 50px;
  width: 50px;
}

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                
  <div class="grid-item"></div>                                                             <div class="grid-item"></div>                                        
</div>

I already tried to use grid-template-rows as well to modify the layout but without success, any advice?

Solution

.grid-container {
  display: grid;
  grid-template-columns: repeat(13, minmax(30px, auto));
  grid-template-rows: repeat(5, minmax(30px, auto));
  gap: 10px;
}

.grid-item {
  background-color: red;
  height: 50px;
  width: 50px;
}

.div1 {
  grid-area: 1 / 1 / 4 / 2;
  height: 100%;
}

.div38 {
  grid-area: 4 / 1 / 6 / 2;
  height: 100%;
}

.div39 {
  grid-area: 4 / 2 / 5 / 6;
  width: 100%;
}

.div40 {
  grid-area: 4 / 6 / 5 / 10;
  width: 100%;
}

.div41 {
  grid-area: 4 / 10 / 5 / 14;
  width: 100%;
}

.div42 {
  grid-area: 5 / 2 / 6 / 4;
  width: 100%;
}

.div43 {
  grid-area: 5 / 4 / 6 / 6;
  width: 100%;
}

.div44 {
  grid-area: 5 / 6 / 6 / 8;
  width: 100%;
}

.div45 {
  grid-area: 5 / 8 / 6 / 10;
  width: 100%;
}

.div46 {
  grid-area: 5 / 10 / 6 / 12;
  width: 100%;
}

.div47 {
  grid-area: 5 / 12 / 6 / 14;
  width: 100%;
}

<div class="grid-container">
  <div class="grid-item div1"></div>
  <div class="grid-item div2"></div>
  <div class="grid-item div3"></div>
  <div class="grid-item div4"></div>
  <div class="grid-item div5"></div>
  <div class="grid-item div6"></div>
  <div class="grid-item div7"></div>
  <div class="grid-item div8"></div>
  <div class="grid-item div9"></div>
  <div class="grid-item div10"></div>
  <div class="grid-item div11"></div>
  <div class="grid-item div12"></div>
  <div class="grid-item div13"></div>
  <div class="grid-item div14"></div>
  <div class="grid-item div15"></div>
  <div class="grid-item div16"></div>
  <div class="grid-item div17"></div>
  <div class="grid-item div18"></div>
  <div class="grid-item div19"></div>
  <div class="grid-item div20"></div>
  <div class="grid-item div21"></div>
  <div class="grid-item div22"></div>
  <div class="grid-item div23"></div>
  <div class="grid-item div24"></div>
  <div class="grid-item div25"></div>
  <div class="grid-item div26"></div>
  <div class="grid-item div27"></div>
  <div class="grid-item div28"></div>
  <div class="grid-item div29"></div>
  <div class="grid-item div30"></div>
  <div class="grid-item div31"></div>
  <div class="grid-item div32"></div>
  <div class="grid-item div33"></div>
  <div class="grid-item div34"></div>
  <div class="grid-item div35"></div>
  <div class="grid-item div36"></div>
  <div class="grid-item div37"></div>
  <div class="grid-item div38"></div>
  <div class="grid-item div39"></div>
  <div class="grid-item div40"></div>
  <div class="grid-item div41"></div>
  <div class="grid-item div42"></div>
  <div class="grid-item div43"></div>
  <div class="grid-item div44"></div>
  <div class="grid-item div45"></div>
  <div class="grid-item div46"></div>
  <div class="grid-item div47"></div>
</div>

Some explanations:

I defined the div38, 1rst col, 2nd div under, it's to fix the others otherwise empty place. Just put it with opacity 0
I defined only what should be, leaving grid doing its job for the others