JSFiddle - React, Tailwind, and code Playground
HTML
<div id="parent">
<div id="column">
<div class="photo">
<img src="http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg" />
</div>
<div class="photo">
<img src="http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg" />
</div>
<div class="photo">
<img src="http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg" />
</div>
<div class="photo">
<img src="http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg" />
</div>
<div class="photo">
<img src="http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg" />
</div>
<div class="photo">
<img src="http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg" />
</div>
<div class="photo">
<img src="http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg" />
</div>
<div class="photo">
<img src="http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg" />
</div>
<div class="photo">
<img src="http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg" />
</div>
<div class="photo">
<img src="http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg" />
</div>
<div class="photo">
<img src="http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg" />
</div>
<div class="photo">
<img src="http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg" />
</div>
</div>
</div>
CSS
#column {
column-width: 360px;
column-gap: 100px;
-webkit-column-width: 360px;
-webkit-column-gap: 100px;
white-space: normal;
display: block;
margin-bottom: 30px;
height: 600px;
}
.photo {
width: 360px;
height: 290px;
}
.photo img {
width: 360px;
height: 200px;
}
JavaScript
window.onresize = function() {
console.log("window height: " + window.innerHeight);
console.log("window width: " + window.innerWidth);
}