Grid layout
Trying to achieve the layout with grid. I got stuck here.
<div class="images">
<img class="first" src="3.png" alt="" />
<img class="second" src="7.png" alt="" />
<img src="2.png" alt="" />
<img class="third" src="4.png" alt="" />
<img class="fourth" src="6.png" alt="" />
<img src="1.png" alt="" />
<img src="5.png" alt="" />
</div><div class="images">
<img class="first" src="3.png" alt="" />
<img class="second" src="7.png" alt="" />
<img src="2.png" alt="" />
<img class="third" src="4.png" alt="" />
<img class="fourth" src="6.png" alt="" />
<img src="1.png" alt="" />
<img src="5.png" alt="" />
</div>.images {
width: 50%;
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(3, 1fr);
}
.first {
grid-row: 1/2;
}
.second {
grid-row: 2/3;
}
.third {
grid-row-start: 2;
grid-row-end: 3;
}
.fourth {
grid-row-start: 3;
grid-column-start: 2;
}.images {
width: 50%;
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(3, 1fr);
}
.first {
grid-row: 1/2;
}
.second {
grid-row: 2/3;
}
.third {
grid-row-start: 2;
grid-row-end: 3;
}
.fourth {
grid-row-start: 3;
grid-column-start: 2;
}
