<div class="container">
<div class="gallery">
<div class="image">
<figure><img src="http://placehold.it/1368x666" alt=""></figure>
</div>
<div class="image image--two">
<figure><img src="http://placehold.it/666x666" alt=""></figure>
<figure><img src="http://placehold.it/666x666" alt=""></figure>
</div>
<div class="image image--three">
<figure><img src="http://placehold.it/432x432" alt=""></figure>
<figure><img src="http://placehold.it/432x432" alt=""></figure>
<figure><img src="http://placehold.it/432x432" alt=""></figure>
</div>
</div>
</div>
/*Downloaded from https://www.codeseek.co/trevorsaint/image-montage-XRZJdp */
.container {
background: #efefef;
width: 1368px;
margin: auto;
}
img {
vertical-align: top; // removes gap
}
.image {
overflow: hidden;
margin-bottom: 36px;
}
.image--two {
margin-left: - 36px;
figure {
float: left;
box-sizing: content-box;
width: 50%;
margin-left: 36px;
max-width: 666px;
}
}
.image--three {
margin-left: - 36px;
figure {
float: left;
box-sizing: content-box;
width: 50%;
margin-left: 36px;
max-width: 432px;
}
}
/*Downloaded from https://www.codeseek.co/trevorsaint/image-montage-XRZJdp */
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
