JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gallery">
    <img src="http://www.blog4designer.com/wp-content/uploads/2013/03/impressionistic_landscape_photography.jpg" />
    <img src="http://www.ephotozine.com/articles/5-key-elements-for-shooting-successful-landscapes-19408/images/photography_landscape_relfections.jpg" />
    <img src="http://www.australia.com/contentimages/campaigns/header-atn-01.jpg" />
    <img src="http://fc00.deviantart.net/fs71/f/2012/329/5/0/wonderland___landscape_calendar__2_by_ivanandreevich-d4u0odw.jpg" />
    <img src="http://upload.wikimedia.org/wikipedia/commons/6/6e/FractalLandscape.jpg" />
    <img src="http://upload.wikimedia.org/wikipedia/commons/6/6e/FractalLandscape.jpg" />
    <img src="http://www.australia.com/contentimages/campaigns/header-atn-01.jpg" />
    <img src="http://fc00.deviantart.net/fs71/f/2012/329/5/0/wonderland___landscape_calendar__2_by_ivanandreevich-d4u0odw.jpg" />
</div>

CSS

.gallery {
    border: 5px solid gray;
    border-radius: 10px;
    width: 400px;
    height: 500px;
    margin: 10px auto;
}
.gallery .sml_img {
    display: inline-block;
    margin: 2px;
    min-width: calc(400px/3 - 6.9px);
    max-width: calc(400px/3 - 7px); /* ширина блока : кол.картинок ― отступы */
    overflow: hidden;
}
.gallery .sml_img img{
    height: 100px;
}
.gallery .bg_img {
    display: inline-block;
    margin: 2px;
    min-height: 125px;
    max-height: 125px;
    overflow: hidden;
}
.gallery .bg_img img{
    width: calc(400px/2 - 6px); /* ширина блока : кол.картинок ― отступы */
}

JavaScript

$(function() {
    $('img:lt(2)').wrap(function() {
        return '<div class="bg_img"></div>';
    });
    $('img:gt(1)').wrap(function() {
        return '<div class="sml_img"></div>';
    });
});