How can I reproduce this with CSS? - html

Question

I am being asked to generate html that looks like the mock up image below. I have some sample HTML and CSS that generate a grid of squares etc. I need to be able convert this grid to look like the mock up image attached below. Preferably would like to use CSS only but I am not limited to using only CSS. My snippet doesn't uses bootstrap but I have access to Bootstrap 4.
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.wrapper div:nth-child(1) {
grid-column: 1/1;
grid-row: 1/5;
}
.wrapper div:nth-child(2) {
grid-column: 2/4;
grid-row: 1/3;
}
.wrapper div:nth-child(3) {
grid-column: 2/2;
grid-row: 3/5;
}
.wrapper div:nth-child(4) {
grid-column: 3/3;
grid-row: 3/5;
}
.wrapper {
display: grid;
grid-template-columns: repeat(2,4);
grid-auto-rows: 100px;
grid-auto-flow: dense;
}
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
My solution is close but the second row and third column doesn't match.

Answer 1

This can be done easily with the Bootstrap 4 grid system. The red border is for visualisation. From here you can add the correct padding/margin to the column contents.
<div class="container">
<div class="row">
<div class="col-3 red-border">
Block 1
</div>
<div class="col">
<div class="row">
<div class="col red-border">
Block 2
</div>
</div>
<div class="row">
<div class="col-4 red-border">
Block 3
</div>
<div class="col red-border">
Block 4
</div>
</div>
</div>
</div>
</div>
<style>
.red-border {
border: 1px solid red;
}
</style>

Answer 2

You can make this with Bootstrap grid
<div class="container">
<div class="row no-gutters">
<div class="col-md-4"></div>
<div class="col-md-8">
<div class="row">
<div class="col-md-12"></div>
</div>
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-6"></div>
</div>
</div>
</div>
Find more details here : https://getbootstrap.com/docs/4.0/layout/grid/