I have a container with 9 square-shaped divs that I want to arrange in the following layout:
It should resemble something like this:
_________ ____ ____
| A | B | C |
| |____|____|
| | D | E |
|_________|____|____|
| F | G | H | I |
|____|____|____|____|
The size of each element will be determined as a percentage of the container's width, with a margin of about 5px between each one.
This is my attempt so far:
<div id="grid">
<div class="block big">
</div>
<div class="block small">
</div>
<div class="block small">
</div>
<div class="block small">
</div>
<div class="block small">
</div>
<div class="block small">
</div>
<div class="block small">
</div>
<div class="block small">
</div>
<div class="block small">
</div>
</div>
And here's the corresponding CSS:
#grid {
width: 90%;
position: relative;
}
.block {
margin: 5px;
background-size: cover;
position: relative;
display: inline-block;
}
.big {
width: 50%;
height: 0;
padding-bottom: 50%;
background-color: #eee;
}
.small {
width: 25%;
height: 0;
padding-bottom: 25%;
background-color: #eee;
}