JSFiddle - React, Tailwind, and code Playground
HTML
<section class="gallery">
<div>
<img src="http://lorempixel.com/800/1000/">
</div>
<div>
<img src="http://lorempixel.com/800/600/">
</div>
<div>
<img src="http://lorempixel.com/800/200/">
</div>
<div>
<img src="http://lorempixel.com/800/700/">
</div>
<div>
<img src="http://lorempixel.com/800/900/">
</div>
<div>
<img src="http://lorempixel.com/800/400/">
</div>
<div>
<img src="http://lorempixel.com/800/200/">
</div>
<div>
<img src="http://lorempixel.com/800/600/">
</div>
<div>
<img src="http://lorempixel.com/800/700/">
</div>
<div>
<img src="http://lorempixel.com/800/600/">
</div>
<div>
<img src="http://lorempixel.com/800/550/">
</div>
<div>
<img src="http://lorempixel.com/800/700/">
</div>
<div>
<img src="http://lorempixel.com/800/600/">
</div>
<div>
<img src="http://lorempixel.com/800/1000/">
</div>
<div>
<img src="http://lorempixel.com/800/700/">
</div>
</section>
CSS
section {
background:magenta; /* So you can see the area I don't want to appear */
}
.gallery {
width:100%;
-webkit-column-count: 2;
-webkit-column-gap: 0;
-moz-column-count: 2;
-moz-column-gap: 0;
column-count: 2;
column-gap: 0;
}
.gallery img {display:block}