JSFiddle - React, Tailwind, and code Playground

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">
      <div class="grid"><img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""></div>
      <div class="grid"><img class="zoom" src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""></div>
      <div class="grid"><img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""></div>
      <div class="grid"><img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt=""></div>
      <div class="grid"><img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""></div>
      <div class="grid"><img class="zoom" src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""></div>
      <div class="grid"><img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""></div>
      <div class="grid"><img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt=""></div>
      <div class="grid"><img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""></div>
      <div class="grid"><img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""></div>
      <div class="grid"><img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""></div>
      <div class="grid"><img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""></div>
      <div class="grid"><img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""></div>
      <div class="grid"><img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""></div>
      <div class="grid"><img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""></div>
      <div class="grid"><img class="zoom"...

CSS

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

.grid {
    overflow: hidden;
    border: 2px solid;
    margin-bottom: 15px;
}

.zoom {
  cursor: pointer;
  transition: all .5s ease;
  transform-origin: center;
  -webkit-backface-visibility: hidden;
}

.grid:hover .zoom {
  transform: scale(1.2);
}

.gal img {
    width: 100%;
    padding: 0;
}

@media (max-width: 500px) {
  .gal {
    -webkit-column-count: 1;
    /* Chrome, Safari, Opera */
    -moz-column-count: 1;
    /* Firefox */
    column-count: 1;
  }
}