JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.js"></script>
<div class="container">
<div class="row">

            <!-- MAIN -->
            <div class="col-sm-10">
                <div class="image_grid">
                    <a data-fancybox="gallery" href="https://placeimg.com/1000/720/people">
                        <img src="https://placeimg.com/1000/720/people">
                    </a>
                    <a data-fancybox="gallery" href="https://placeimg.com/1000/720/arch">
                        <img src="https://placeimg.com/1000/720/arch">
                    </a>
                    <a data-fancybox="gallery" href="https://placeimg.com/1000/720/nature">
                        <img src="https://placeimg.com/1000/720/nature">
                    </a>
                </div>
            </div>
            <!-- SIDEBAR -->
            <div class="col-sm-2">
            </div>
            </div>
            </div>

SCSS

.image_grid {
  padding-left: 15px;
  padding-right: 15px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  a {
    padding: 5px;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 33.33%;
    -ms-flex: 1 0 33.33%;
    flex: 1 0 33.33%;
    img {
      width: 100%;
      max-height: auto;
    }
  }
}