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%;
  line-height:0;
  -webkit-column-count: 2;
  -webkit-column-gap:   0;
  -moz-column-count:    2;
  -moz-column-gap:      0;
  column-count:         2;
  column-gap:           0;
}