Create image grid - bootstrap4 - html

Question

I'm trying to create an image grid with that little space between columns equal to the image below:
The problem is that I can not make the right margin(red line), image below shows the problem:
JSfiddle: https://jsfiddle.net/castordida/0zy7qd5m/
<div class="container gridhome mt-5 mb-5 p-0">
<div class="row" style="height:469px;">
<div class="col-sm-8 h-100" style="background-color:#000;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
<div class="col-sm-4 h-100 p-0">
<div class="col-sm-12 h-50 p-0">
<div class="h-100 ml-1" style="background-color:#919191;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
</div>
<div class="col-sm-12 h-50 p-0">
<div class="h-100 ml-1 mt-1" style="background-color:#919191;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
</div>
</div>
</div>
<div class="row mt-1" style="height:234.5px;">
<div class="col-sm-4 h-100 p-0">
<div class="h-100" style="background-color:#919191;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
</div>
<div class="col-sm-4 h-100 p-0">
<div class="h-100 ml-1" style="background-color:#919191;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
</div>
<div class="col-sm-4 h-100 p-0">
<div class="h-100 ml-1" style="background-color:#919191;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
</div>
</div>
</div>

Answer 1

Ok it's due to the fact there is a gab between your picture at right... But the fixed height doesn't mention it...
There are many ways to correct this...
First : https://jsfiddle.net/y0x7kpza/
Add an overflow:hidden to the first .row
Second: https://jsfiddle.net/d0a52xwk/
Reaffect the height of the two div on the right in taking care of the margin-top of these elements.
.h-50-bis{
height:calc(50% - 0.125rem);
}