<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');

body {
  margin: 0px;
  padding: 0px;
  background: #060C21;
  font-family: 'Poppins', sans-serif;
  position: relative;
  width: 100vw;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16vw, 1fr));
  grid-gap: 3vw;
}

.box {
  position: relative;
  height: 30vh;
  background: #060C21;
  border: 1px solid #000;
  margin: 2vw;
}

.box::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #FFF;
  transform: skew(2deg, 2deg);
  z-index: -1;
}

.box:nth-child(n+1)::before {
  background: linear-gradient(315deg, #FF0057, #E64A19);
}

.box:nth-child(2n+1)::before {
  background: linear-gradient(315deg, #89FF00, #00BCD4);
}

.box:nth-child(3n+1)::before {
  background: linear-gradient(315deg, #E91E63, #5D02FF);
}

.box:nth-child(4n + 1)::before {
  background: linear-gradient(315deg, #0375f4, #7055bc);
}
.box:nth-child(5n - 1)::before {
  background: linear-gradient(315deg, #b11ee9, #0ecd31);
}

.box:nth-child(2n)::before {
  transform: skew(-2deg, -2deg);
}

.box:nth-child(3n + 1)::before {
  transform: skew(-2deg, 2deg);
}

.box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,0.05);
  pointer-events: none;
}