I'm facing a challenge with arranging five images in a grid-like layout. To give you a visual idea, here's what I have in mind:
https://i.sstatic.net/sl1B6.jpg
From my understanding, achieving such a design would require positioning the items absolutely. However, the issue arises when the screen is resized in either height or width, as the images may overlap or the spacing between them may increase.
For instance, this is how the gap looks on an extra-large screen:
https://i.sstatic.net/vsBOa.jpg
The demo I've put together demonstrates my current "static" / hardcoded method. While it works to some extent, I believe there might be better alternatives to achieve this design.
If you have any suggestions or guidance, I would greatly appreciate it.
.imageGrid {
overflow: hidden;
padding: 120px 0 814px 0;
position: relative;
}
.imageGrid__images-img {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: absolute;
}
.imageGrid__images-img-1 {
width: 280px;
height: 320px;
top: 485px;
left: 0;
}
.imageGrid__images-img-2 {
width: 427px;
height: 319px;
top: 485px;
left: 310px;
}
.imageGrid__images-img-3 {
width: 737px;
height: 342px;
left: 0;
bottom: 30px;
}
.imageGrid__images-img-4 {
width: 500px;
height: 527px;
right: 0;
top: 119px;
}
.imageGrid__images-img-5 {
width: 600px;
height: 500px;
right: 0;
top: calc(500px + 119px + 30px);
}<section class="imageGrid">
<div class="imageGrid__images">
<div class="imageGrid__images-img imageGrid__images-img-1" loading="lazy" style="background-image: url('https://i.imgur.com/k7fNrV9.png');"></div>
<div class="imageGrid__images-img imageGrid__images-img-2" loading="lazy" style="background-image: url('https://i.imgur.com/knI2LcY.png');"></div>
<div class="imageGrid__images-img imageGrid__images-img-3" loading="lazy" style="background-image: url('https://i.imgur.com/Hyn2v1J.png');"></div>
<div class="imageGrid__images-img imageGrid__images-img-4" loading="lazy" style="background-image: url('https://i.imgur.com/oZG4m8k.png');"></div>
<div class="imageGrid__images-img imageGrid__images-img-5" loading="lazy" style="background-image: url('https://i.imgur.com/dOvSc80.png');"></div>
</div>
</section>