Image gallery block with CSS with different image dimension? - css

Question

I was trying to achieve the below layout with CSS. Here is the layout snap:
https://archive.org/details/Untitled1_20161122
Without masonry as this is not possible with masonry I guess (row/column width/height both changes which is not the case in masonry, I might be wrong though). Is there a nice pure CSS solution. It would be much appreciated. I have been searching for a CSS solution for quite long. www.bata.com for example have similar result in their homepage if that helps to explain the purpose, and without masonry as far as I am concerned.
Here is my code:
.gallery {
width: 70%;
margin: 0 auto;
background: crimson;
position: relative;
}
.col-20 {
width: 20%;
float: left;
/*border: 1px solid red;*/
}
.col-40 {
width: 40%;
float: left;
/*border: 1px solid red;*/
}
.col-60 {
width: 60%;
float: left;
/*border: 1px solid red;*/
}
div {
overflow: hidden;
}
img {
width: 100%;
height: auto;
}
<div class="gallery">
<div class="col-40">
<img src="1.png" alt="">
</div>
<div class="col-20">
<img src="2.jpg" alt="">
</div>
<div class="col-20">
<img src="3.jpg" alt="">
</div>
<div class="col-20">
<img src="4.png" alt="">
</div>
<div class="col-20">
<img src="2.jpg" alt="">
</div>
<div class="col-20">
<img src="3.jpg" alt="">
</div>
</div>
Thank you in advance.

Answer 1

If you are fine with a static layout, you could use a table with a fixed layout and no borders.
https://css-tricks.com/fixing-tables-long-strings/
Set your images as backgrounds for the table with background-size: cover;
Then using width, colspan and rowspan, create a fixed layout on your table.