<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}
.grid > div {
  height: 200px;
}
.grid > div:nth-child(1) {
  background-color: #ffd600;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 9px,
    #f4ff81 9px,
    #f4ff81 10px
  );
}

.grid > div:nth-child(2) {
  background-color: #cfd8dc;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 1px,
    #90a4ae 1px,
    #90a4ae 2px
  );
}

.grid > div:nth-child(3) {
  background-color: #e53935;
  background-image: repeating-linear-gradient(
    10deg,
    transparent,
    transparent 20px,
    #c62828 20px,
    #c62828 23px
  );
}

.grid > div:nth-child(4) {
  background-color: #689f38;
  background-image: repeating-linear-gradient(
    -25deg,
    transparent,
    transparent 40px,
    #aed581 40px,
    #aed581 50px
  );
}

.grid > div:nth-child(5) {
  background-image: repeating-linear-gradient(
      90deg,
      rgba(224, 82, 67, 0.5) 0px,
      rgba(224, 82, 67, 0.5) 40px,
      transparent 40px,
      transparent 80px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(224, 82, 67, 0.5) 0px,
      rgba(224, 82, 67, 0.5) 40px,
      transparent 40px,
      transparent 80px
    ),
    linear-gradient(90deg, hsl(250, 82%, 1%), hsl(250, 82%, 1%));
}

.grid > div:nth-child(6) {
  background-image: repeating-linear-gradient(
      45deg,
      hsla(312, 0%, 63%, 0.05) 0px,
      hsla(312, 0%, 63%, 0.05) 10px,
      transparent 10px,
      transparent 100px
    ),
    repeating-linear-gradient(
      90deg,
      hsla(312, 0%, 63%, 0.05) 0px,
      hsla(312, 0%, 63%, 0.05) 50px,
      transparent 50px,
      transparent 100px
    ),
    linear-gradient(90deg, hsl(80, 0%, 20%), hsl(80, 0%, 20%));
}

body {
  margin: 2rem;
}