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>
My attempt looks like this:
I would be nice if it's responsive.
Here is the template, which I have to convert.