Trying to achieve responsive boxed structure using CSS - html

Question

I am trying to achieve a structure like below on a webpage
https://www.figma.com/file/NfikH1inSqCgwXOSzb3VeDCW/Untitled?node-id=0%3A1
So the full width is max width 1600px. Problem is, making it responsive has become very complex.
Reason is, all the boxes are given width in percentages.
So first whole section is divided in 2 parts 50% left – 50% right.
Inside 50% left – I have added 4 images by giving 50% width
Inside 50% right – I have added 1 image by giving 100% width
If we use just images in this structure, it stays very responsive if I reduce the screen size.
But as there are texts added BELOW each images, the box that contains the text has fixed width (66px). When we reduce the screen size, this disturbs the layout responsiveness.
Any solution to make it proper responsive?
I tried making the text box as an overlay to the image, so position absolute bottom of the image which fixes the issue but then the bottom part of the image goes behind the text box.
I want to make sure the image stays full visible and the text box also stay below it.
Any thoughts? I am happy to use JS too if there is a good solution.

Answer 1

*{
box-sizing: border-box;
}
.fifty {
width: 50%;
padding-bottom: 66px;
position: relative;
}
.parent {
display: flex;
flex-wrap: wrap;
}
img {
width: 100%;
height: 100%;
}
.left {
display: flex;
flex-wrap: wrap;
}
p {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
}
.pb-0 {
padding-bottom: 0;
}
.child {
border: 1px solid #333;
}
<div class="parent">
<div class="left fifty pb-0">
<div class="fifty child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p>
</div>
<div class="fifty child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p>
</div>
<div class="fifty child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p>
</div>
<div class="fifty child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p>
</div>
</div>
<div class="right fifty child">
<img src="https://dummyimage.com/350x250/ffa0a0/ffa0a0" alt="image"/>
<p>Text Right</p>
</div>
</div>
I think you want something like this, if needed anything else, Please let me know