I am trying to produce the following result:
Desired outcome
However I am getting this so far and I am stuck.
What I am getting
This is my code:
.base {
background: #e2e2e2;
width: 1020px;
height: 350px;
position: absolute;
top: 100px;
left: 130px;
}<div class="section5" style="width:100%;background-color:#f5f5f5;height:550px;position: relative;">
<div class="base"></div>
<div class="square1" style="width:255px;height:193px;background-color:#969696; z-index:1;"></div>
</div>3
We start with the base of our HTML:
<div class="section5">
<div class="base"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
And style:
.section5 {
position: relative;
width: 800px;
height: 600px;
background-color: #f5f5f5
}
.base {
position: relative;
width: 600px;
height: 400px;
background-color: #e2e2e2;
left: 100px;
top: 100px;
}
.square {
position: absolute;
width: 150px;
height: 120px;
background-color: #969696;
}
Now we can use nth-of-type to make the odd squares white:
.square:nth-child(odd) {
background-color: white;
}
To calculate the absolute position of the squares, if we want the first and last square to have a 50px gap from the .section5 square, and we have n squares, we can calculate the distance d between two adjacent squares like this:
d = (W - 2x - w) / (n - 1)
where W is the width of the .section5 and x is the 50px gap we mentioned earlier. So the d in this case will be 110px, so the left of each square needs to be increased by 110px from the previous one.
The same logic applies to the top.
And by applying those, we get the final result (open it in full view)
.section5 {
position: relative;
width: 800px;
height: 600px;
background-color: #f5f5f5;
}
.base {
position: relative;
width: 600px;
height: 400px;
background-color: #e2e2e2;
left: 100px;
top: 100px;
}
.square {
position: absolute;
width: 150px;
height: 120px;
background-color: #969696;
}
/* Apply alternating background color to odd squares */
.square:nth-child(odd) {
background-color: white;
}
/* Positioning the squares */
.square:nth-child(2) {
left: 50px;
top: 50px;
}
.square:nth-child(3) {
left: 160px;
top: 126px;
}
.square:nth-child(4) {
left: 270px;
top: 202px;
}
.square:nth-child(5) {
left: 380px;
top: 276px;
}
.square:nth-child(6) {
left: 490px;
top: 354px;
}
.square:nth-child(7) {
left: 600px;
top: 430px;
}<div class="section5">
<div class="base"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>An alternative approach using CSS variables:
.square {
position: absolute;
width: 150px;
height: 120px;
background-color: #969696;
left: calc(50px + 110px * var(--i));
top: calc(50px + 76px * var(--i));
}
.square:nth-child(2) { --i: 0; }
.square:nth-child(3) { --i: 1; }
.square:nth-child(4) { --i: 2; }
.square:nth-child(5) { --i: 3; }
.square:nth-child(6) { --i: 4; }
.square:nth-child(7) { --i: 5; }
1
It might help, it’s derived with the help of z-index, you can adjust the rest of the boxes.
.section5{
width:100%;
background-color:#f5f5f5;
height:550px;
position: relative;
z-index:0;
}
.square1{
width:255px;
height:193px;
background-color:#969696;
position: relative;
z-index:1;
}
.base{
background:#e2e2e2;
width:1020px;
height:350px;
position: absolute;
top: 100px;
left:130px;
z-index: -1;
}<div class="section5">
<div class="base"></div>
<div class="square1"></div>
</div>