JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <div class="grid__item">
    <img src="https://404store.com/2017/08/15/4949794-random-image.jpg" alt="" />
  </div>
  <div class="grid__item">
    <img src="https://404store.com/2017/08/15/4949794-random-image.jpg" alt="" />
  </div>
  <div class="grid__item">
    <img src="https://404store.com/2017/08/15/4949794-random-image.jpg" alt="" />
  </div>
  <div class="grid__item">
    <img src="https://404store.com/2017/08/15/4949794-random-image.jpg" alt="" />
  </div>
  <div class="grid__item">
    <img src="https://404store.com/2017/08/15/4949794-random-image.jpg" alt="" />
  </div>
  <div class="grid__item">
    <img src="https://404store.com/2017/08/15/4949794-random-image.jpg" alt="" />
  </div>
  </div>
  
</div>

CSS

.grid {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -5px; /* remove the inital 5px space */
    width: auto;
}
.grid__item {
    width: 25%;
    padding: 0 5px; /* should be same as the negative margin above. */
}

img {
  max-width: 100%;
}

* {
  box-sizing: border-box;
}