JSFiddle - React, Tailwind, and code Playground

by Debraj Rakshit

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <div class="gallery">
    <div class="gallery-artwork">
      <img src="http://placehold.it/400x225">
    </div>
    <div class="gallery-artwork">
      <img src="http://placehold.it/400x225">
    </div>
    <div class="gallery-artwork">
      <img src="http://placehold.it/400x225">
    </div>
    <div class="gallery-artwork">
      <img src="http://placehold.it/400x225">
    </div>
    <div class="gallery-artwork">
      <img src="http://placehold.it/400x225">
    </div>
  </div>

CSS

.gallery {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.gallery-artwork {
  width: 400px;
  display: flex;
  flex-flow: column;
  margin: 0.5em;
}

JavaScript

$(document).ready(function(){
var i = $('.gallery-artwork').length;
  	if (i % 2 == 0){
    }else{
    	$(".gallery").append("<div class='gallery-artwork'></div>");
    }
});