JSFiddle - React, Tailwind, and code Playground

by Peter Aad

HTML

<section class="body">
    <div class="bodyContainer" id="photos">
        <img src="http://placehold.it/350x250" />
        <img src="http://placehold.it/150x250" />
        <img src="http://placehold.it/250x350" />
        <img src="http://placehold.it/350x450" />
        <img src="http://placehold.it/450x550" />
        <img src="http://placehold.it/250x250" />
        <img src="http://placehold.it/350x350" />
        <img src="http://placehold.it/450x150" />
        <img src="http://placehold.it/350x150" />
        <img src="http://placehold.it/550x350" />
        <img src="http://placehold.it/150x450" />
        <img src="http://placehold.it/450x250" />
        <img src="http://placehold.it/550x350" />
    </div>
</section>

CSS

#photos {
        /* Prevent vertical gaps */
        line-height: 0;
        -webkit-column-count: 4;
        -webkit-column-gap: 0px;
        -moz-column-count: 4;
        -moz-column-gap: 0px;
        column-count: 4;
        column-gap: 0px;
        margin:0 auto;
        padding:0;
    }
    #photos img {
        /* Just in case there are inline attributes */
        width: 100%;
        height: 100%;
        margin: 1%;
        padding:0;
    }
    .body {
        margin:0;
        padding:0;
        clear:both;
    }
    .bodyContainer {
        width:80%;
        height:auto;
        margin:0 auto;
    }