Boxes with space between (different width/height) - html

Question

I'm trying to build an element for a magazine website, where the first element consists of post promotion boxes with different widths and heights like on the following pic:
I'm using ZURB Foundation
I need a gutter between the boxes like on the pic
Using collapse and appropriate image sizes, I can get the desired result, but without gutters between the pics.
When I define custom foundation gutters manually, the height of the left pic changes for some pixels
Here is my approach:
<div class="row collapse">
<div class="column medium-6"><!-- Left Pic 50% width --></div>
<div class="column medium-6">
<div class="row collapse">
<div class="column medium-12"><!-- Right Top Pic 50% width, 50% height --></div>
<div class="column medium-6"><!-- Right Bottom Left Pic 25% width, 50% height --></div>
<div class="column medium-6"><!-- Right Bottom Right Pic 25% width, 50% height --></div>
</div>
</div>
</div>

Answer 1

It seems a good scenario for Grid layout
The basic idea is to create a template of the desired grid using grid-template property on the parent container and later to assign each area to the children elements with grid-area property.
Codepen demo
Markup
<section class="grid">
<div class="item first">
<img src="https://placekitten.com/g/600/500" />
</div>
<div class="item second">
<img src="https://placekitten.com/g/300/150" />
</div>
<div class="item third">
<img src="https://placekitten.com/g/149/100" />
</div>
<div class="item fourth">
<img src="https://placekitten.com/g/149/100" />
</div>
</section>
CSS
.grid {
width: 600px;
height: 250px;
display: grid;
grid-column-gap: 3px;
grid-row-gap: 3px;
grid-template:
"first first second second" 1fr
"first first second second" 1fr
"first first second second" 1fr
"first first third fourth" 1fr
"first first third fourth" 1fr / 1fr 1fr 1fr 1fr;
}
.grid .first { grid-area: first; }
.grid .second { grid-area: second; }
.grid .third { grid-area: third; }
.grid .fourth { grid-area: fourth; }
Images can be added either as regular img elements or as backgrounds, as you prefer.
Result