<div class="container">
<div class="thumb">
<img src="http://placehold.it/200x300" alt="" />
</div>
<div class="thumb thumb2">
<img src="http://placehold.it/100x300" alt="" />
</div>
<div class="thumb">
<img src="http://placehold.it/100x100" alt="" />
</div>
<div class="thumb thumb2">
<img src="http://placehold.it/300x200" alt="" />
</div>
<div class="thumb ">
<img src="http://placehold.it/100x100" alt="" />
</div>
<div class="thumb thumb2">
<img src="http://placehold.it/300x200" alt="" />
</div>
<div class="thumb">
<img src="http://placehold.it/100x300" alt="" />
</div>
<div class="thumb thumb2">
<img src="http://placehold.it/100x100" alt="" />
</div>
<div class="thumb">
<img src="http://placehold.it/300x200" alt="" />
</div>
<div class="thumb thumb2">
<img src="http://placehold.it/100x100" alt="" />
</div>
<div class="thumb">
<img src="http://placehold.it/300x200" alt="" />
</div>
</div>
* {
box-sizing: border-box;
}
img {
max-width: 100%;
}
.container {
display: flex;
flex-wrap: wrap;
height: 100vh;
}
.thumb {
border: 2px solid green;
flex: 1 1 100%;
display: flex;
align-items: center;
justify-content: center;
}
@media(min-width: 480px) {
.thumb {
flex: 1 1 50%;
}
}
@media(min-width: 640px) {
.thumb {
flex: 1 1 25%;
}
.thumb2 {
flex: 1 1 50%;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.