I wouldn’t use grid-template-areas for such a giant layout. It’s a bit complicated to read for everybody. I would simply create the same box over and over but assign 3 rows and 3 columns to that specific (text) element.
This way, you can also remove a couple of extra divs.
.wrapper {
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.text {
grid-row: 1 / span 3;
grid-column: 6 / span 3;
}
.img-fluid {
width: 100%;
}
<div class="wrapper">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<div class="text">sadfasdfasdf</div>
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
</div>
This is what I’m trying to acomplish: 
Small parts are images and bigger one is for text, spacing should be same everywhere
What would be the best way to accomplish this? I am trying it out with grid (I am not sure how else would I be able to do this) but without right success. How to force images so that they line up nicely and with the correct spacing?
Here is the Codepen
https://codepen.io/ivan-topi/pen/BaLvQbL
.container {
max-width: 1200px;
margin: auto;
}
.wrapper {
display: grid;
grid-gap: 15px;
grid-template: "img img img img img text text text img2 img2" "img img img img img text text text img2 img2" "img img img img img text text text img2 img2";
}
.first {
grid-area: img;
}
.first img {
width: 20%;
}
.second {
grid-area: text;
background: #333;
color: #fff;
min-width: 320px;
}
.third {
grid-area: img2;
}
.third img {
width: 50%;
}
<div class="container">
<div class="wrapper">
<div class="first">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
</div>
<div class="second">sadfasdfasdf</div>
<div class="third">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
<img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
</div>
</div>
</div>
