How to make that grid? - html

Question

Do you know how to make the grid like this?
I tried to create that with margins to make white spaces. However, it doesn't work for first <div> because it has own height and margin [%].
.block {
height: 270px;
width: 47%;
margin: 1.5%;
display: block;
float: left;
}
.blockbig {
width: 97%;
margin: 1.5%;
height: 540px;
display: block;
float: left;
}
.blockw {
width: 97%;
margin: 1.5%;
height: 270px;
display: block;
float: left;
}
.rectagle {
height: 550px;
width: 47%;
margin: 1.5%;
display: block;
float: left;
}
.row1 {
width: 50%;
float: left;
}
#media (max-width: 1160px) {
.container {
width: 90%;
}
}
#media (max-width: 900px) {
#b4 {
clear: both;
}
.block {
width: 28.83%;
}
}
<div class="container">
<div class="row1">
<div class="">
<div id="b1" class="rectagle" style="background-color: Beige;">1</div>
<div id="b2" class="block" style="background-color: orange;">2</div>
<div id="b6" class="block" style="background-color: blue;">6</div>
</div>
<div id="b7" class="blockbig" style="background-color: black;">7</div>
</div>
<div class="row1">
<div id="b3" class="block" style="background-color: black;">3</div>
<div id="b4" class="block" style="background-color: orange;">4</div>
<div id="b5" class="blockbig" style="background-color: Aquamarine">5</div>
<div id="b8" class="blockw" style="background-color: Azure ;">8</div>
</div>
</div>
View on JSFiddle
My attempt looks like this:
I would be nice if it's responsive.
Here is the template, which I have to convert.

Answer 1

Ok, I made that.
* {
box-sizing: border-box;
}
#b1 {
display: block;
float: left;
width: 25%;
height: 540px;
}
#b2, #b3, #b4, #b6 {
display: block;
float: left;
width: 25%;
height: 270px;
}
#b5, #b7 {
display: block;
width: 50%;
height: 540px;
}
#b5 {
float: right;
}
#b7 {
float: left;
}
#b8 {
display: block;
float: left;
width: 50%;
height: 270px;
}
.row1 {
width: 100%;
}
#media (max-width: 1160px) {
.container {
width: 90%;
}
.container1 {
width: 100%;
}
#media (max-width: 850px) {
#b1, #b7 {
height: 428px;
}
#b2, #b3, #b4, #b6 {
height: 214px;
}
#b1, #b2, #b3, #b4, #b6 {
width: calc(100%/3);
}
#b5, #b8 {
height: 214px;
}
}
#media (max-width: 640px) {
#b1, #b2, #b3, #b4, #b6, #b7, #b5 {
width: 50%;
}
#b7 {
height: 214px;
}
#b8 {
width: 100%;
}
}
#media (max-width: 480px) {
#b1, #b2, #b3, #b4, #b6, #b7, #b5, #b8 {
width: 100%;
height: 400px;
}
}
<div class="container1">
<div class="row1">
<div id="b1" class="inline-block" style="background-color: Beige;"><div class="block-content">1</div></div>
<div id="b2" class="inline-block" style="background-color: orange;"><div class="block-content">2</div></div>
<div id="b3" class="inline-block" style="background-color: black;"><div class="block-content">3</div></div>
<div id="b4" class="inline-block" style="background-color: orange;"><div class="block-content">4</div></div>
<div id="b6" class="inline-block" style="background-color: blue;"><div class="block-content">6</div></div>
<div id="b5" class="inline-block" style="background-color: Aquamarine"><div class="block-content">5</div></div>
<div id="b7" class="inline-block" style="background-color: black;"><div class="block-content">7</div></div>
<div id="b8" class="inline-block" style="background-color: Azure ;"><div class="block-content">8</div></div>
</div>
</div>
However, with border-box, I do not know how to use padding to add white spaces [10px] around all blocks.