Flexbox collage grid layout - html

Question

Is it possible make this layout with pure css without the flexbox properties?
I try to create the photo gallery collage for the VC slider. Is it possible to use here grid properties? I use nesting flexbox, what is the best practice? flexbox gallery collage
<div class="contaner">
<div class="item">
<img src="http://www.telegraph.co.uk/content/dam/pets/2016/05/31/66900964_AR6KDA-CAT-BIRD-PETS-large_trans++XgrBd0P19THPvf9738yRPd-JR69WJ8Rdth_SfFJ_dbY.jpg" alt="" />
</div>
<div class="item item-flex">
<img class="item-flex-img-big" src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" />
<img class="item-flex-img" src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" />
</div>
<div class="item item-flex">
<img class="item-flex-img" src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" />
<img class="item-flex-img-big" src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" />
</div>
<style>
img {
width: 100%;
max-width: 100%;
object-fit: cover;
object-position:50% 50%;
height: 100%;
}
.contaner {
display: flex;
.item {
flex: 1 1 100%;
}
.item + .item {
padding-left: 10px;
}
.item-flex {
display: flex;
flex-direction: column;
}
.item-flex {
img + img {
margin-top:10px;
}
}
.item-flex-img{
height: 40%;
}
.item-flex-img-big{
height: 60%;
}
}
</style>

Answer 1

You may take a look at column CSS.
.contaner {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-rule-width: 5px;
-moz-column-rule-width: 5px;
column-rule-width: 5px;
height: 600px;
width: 1200px;
padding: 15px 15px 0;
overflow: hidden;
}
span {
display: block;
overflow: hidden;
height: calc(40% - 15px);
min-width: 100%;
margin: 0 0 15px;
}
span:nth-child(1) {
height: calc(100% - 15px);
}
span img {
width: 100%;
object-fit: cover;
object-position:50% 50%;
height: 100%;
}
span:nth-child(2),
span:nth-child(5) {
height: calc(60% - 15px);
}
span:nth-child(1) img {
height: 100%;
margin: 0;
object-position:10% 50%;
}
/* snippet purpose */
body {
margin: 0;
}
.contaner {
box-sizing: border-box;
height: 100vh;
width: 200vh;
}
<div class="contaner">
<span><img src="http://www.telegraph.co.uk/content/dam/pets/2016/05/31/66900964_AR6KDA-CAT-BIRD-PETS-large_trans++XgrBd0P19THPvf9738yRPd-JR69WJ8Rdth_SfFJ_dbY.jpg" alt="" /></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" /></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" /></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" /></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" /></span>
</div>
notice: each image are wrapped in a single span all sibblings (could be figure or any tag else)