div.wrapper > div > p {
  text-align: center;
}
div.wrapper > div:nth-child(1n) {
  background: #96ceb4;
}
div.wrapper > div:nth-child(3n) {
  background: #88d8b0;
}
div.wrapper > div:nth-child(2n) {
  background: #ff6f69;
}
div.wrapper > div:nth-child(4n) {
  background: #ffcc5c;
}
div.wrapper {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
  grid-auto-rows: 100px; /*grid-auto-rows allows us to define how many height our rows that
  we don't defined in our grid should have, it's useful when we don't know how many rows our
  grid will contain. We can even define just this instructions if we don't know how many
  rows we need*/
}