JSFiddle - React, Tailwind, and code Playground

by Per Andersson

HTML

<div class="parent">
  
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>

  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>  

  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>  

  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>  

  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>  

</div>

CSS

.parent {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
}
.parent a {
  display: inline-block;
  height: calc(20% - 2px);
  width: calc(20% - 2px);
  background: #ddd no-repeat center center;
  background-size: contain;
  margin: 1px;
}
.parent a:nth-child(odd) {
  background-image: url(http://lorempixel.com/300/150/animals/3);
}
.parent a:nth-child(even) {
  background-image: url(http://lorempixel.com/150/300/animals/3);
}