I have a collection of images that I want to arrange in a tiled layout, similar to the one shown in this image. These images consist of 3 photos with identical width and height, except for one which is larger and should occupy double the space compared to the others.
I have managed to create a tiling effect, but the challenge is getting the next row to begin where the large image in the previous row ends.
(If my explanation is unclear, please refer to the illustration provided in this link.)
Below is the HTML code snippet:
<div class="portfolio">
<div class="row">
<img src="" alt="" class="smallWidthImg"/>
<img src="" alt="" class="smallWidthImg"/>
<img src="" alt="" class="smallWidthImg"/>
<img src="" alt="" class="largeWidthImg"/>
</div>
<div class="row">
<img src="" alt="" class="smallWidthImg"/>
<img src="" alt="" class="smallWidthImg"/>
<img src="" alt="" class="smallWidthImg"/>
</div>
</div>
Additionally, here is the corresponding CSS markup:
.portfolio {
position: absolute;
width: 77.1%;
top: 165%;;
left: 50%;
transform: translate(-50%, 0);}
.smallWidthImg {
float: left;
width: 14.47%;
padding: 0 0.85% 0.85% 0.85%;}
.smallWidthImg {
float: left;
width: 14.47%;
padding: 0 0.85% 0.85% 0.85%;}
.smallWidthImg:first-child {
padding-left: 0;}
.smallWidthImg:last-child {
padding-right: 0;}
.largeWidthImg {
float: left;
width: 30.64%;
padding: 0 0.85% 0.85% 0.85%;}
.largeWidthImg:first-child {
padding-left: 0;}
.largeWidthImg:last-child {
padding-right: 0;}
My question is whether achieving this layout is feasible using only CSS?
As I am not proficient in JavaScript, I am unable to explore that avenue for a solution.
Any guidance or assistance on this matter would be greatly appreciated.