I'm currently working on creating a grid layout that aligns with this wireframe design:
https://i.sstatic.net/AdsMX.png
Here is the markup I have implemented so far:
<div class="grid">
<div class="spanWidth">
<img src="https://loremflickr.com/290/130?random=1" />
</div>
<div>
<img src="https://loremflickr.com/140/130?random=2" />
</div>
<div>
<img src="https://loremflickr.com/140/180?random=3" />
</div>
<div>
<img src="https://loremflickr.com/140/130?random=4" />
</div>
<div>
<img src="https://loremflickr.com/140/130?random=5" />
</div>
<div>
<img src="https://loremflickr.com/140/180?random=6" />
</div>
<div>
<img src="https://loremflickr.com/140/130?random=7" />
</div>
</div>
Accompanied by this CSS:
.grid {
display: grid;
grid-gap: 10px;
}
.spanWidth {
grid-column: 1 / span 2;
}
The issue I am encountering pertains to the images of varying sizes, as they disrupt the 'row' layout and occupy more than one row. As a result, there are empty spaces in the grid:
https://i.sstatic.net/uwDPq.png
Do you have any suggestions on how I can adjust this to match the wireframe design?