JSFiddle - React, Tailwind, and code Playground

by Tanmay Mandal

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    <div class="container">

   <div class="col-md-12">
      <div class="row">
	     <div class="gal">
	            <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
		        <img class="zoom"  src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
		    	<img class="zoom"  src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
			    <img class="zoom"  src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
			    <img class="zoom"  src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img class="zoom"  src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
			    <img class="zoom"  src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img class="zoom"  src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
				<img class="zoom"  src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img class="zoom"  src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img class="zoom"  src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img class="zoom"  src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img class="zoom"  src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img class="zoom"  src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img class="zoom"  src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img class="zoom"  src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
				<img class="zoom"  src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
                <img class="zoom"  src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img class="zoom"  src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img class="zoom"  src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img...

CSS

.gal {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
       -moz-column-count: 3; /* Firefox */
            column-count: 3;
    display: block;
	overflow: hidden;
}	

.zoom{
	
	cursor: pointer;
	transition: all .5s ease;
   
}
.zoom:hover{
	
  transform: scale(1.2,1.2);
    
}
	.gal img{ width: 100%; padding: 7px 0;}
     @media (max-width: 500px) {
		.gal {
	   -webkit-column-count: 1; /* Chrome, Safari, Opera */
          -moz-column-count: 1; /* Firefox */
               column-count: 1;
	   }	
	}