Building grid with setting a height - html

Question

I am trying to make a grid system with inspiration from this Bootstrap 3 template:
Link to template
I can see in the code that the 4 big grid elements are controlled with setting a height. I can make the first 2 grid items, but I am lost right now how to make the 2 small columns.
Here is the code what I made until now:
[Link to my demo model][3]
<style>
.bg-img {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.item1 {
height:600px;
}
.item2 {
height:300px;
}
.item3 {
height: 300px;
}
</style>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 bg-img item1" style="background-image:url(https://placehold.it/600x600;)"></div>
<div class="col-sm-6 bg-img item2" style="background-image:url(https://placehold.it/300x600;)"></div>
</div>
</div>
</section>
Can anybody help me?
Best regards.

Answer 1

I hope this code will help you. I make this by Grid css.
.grid-container {
display: grid;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
grid-column: 1 / span 2;
grid-row: 1;
}
.item2 {
grid-column: 3;
grid-row: 1 / span 2;
}
<div class="grid-container">
<div class="grid-item item1">1</div>
<div class="grid-item item2">2</div>
<div class="grid-item item3">3</div>
<div class="grid-item item4">4</div>
</div>

Answer 2

I hope this will solve your issue.
I replaced your images with a simple background-color, but overall it should be fully responsive. (It's not 100% perfect - left container is wider than the right container)
Some helpful links: bootstrap overview, bootstrap grid
Note: view example on full page :)
body {
padding: 15px;
}
.item-1 {
height: 600px;
background: blue;
}
.item-2 {
height: 600px;
padding-right: 0;
/* container right */
background-color: white;
}
.item-3 {
height: 292.5px;
margin-bottom: 7.5px;
background-color: green;
}
.item-4 {
padding: 0 15px;
}
.item-5 {
height: 292.5px;
margin-top: 7.5px;
border-right: 7.5px solid white;
background-color: purple;
}
.item-6 {
height: 292.5px;
margin-top: 7.5px;
border-left: 7.5px solid white;
background-color: yellow;
}
/* Small devices (landscape phones, less than 768px) */
#media (max-width: 767.98px) {
.item-2 {
padding: 0 !important;
margin: 0;
height: auto;
}
.item-3,
.item-5,
.item-6 {
border: 0;
padding: 0;
margin: 0;
height: 300px;
}
/* To prevent responsiveness issue, caused by .row bootstrap class */
.no-margin {
margin: 0;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="no-margin row">
<div class="item-1 col-md"></div>
<div class="item-2 col-md">
<div class="item-3 col-md"></div>
<div class="item-4 row">
<div class="item-5 col-md"></div>
<div class="item-6 col-md"></div>
</div>
</div>
</div>
</div>