* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container > div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: #ffeead;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* =============================== */

/* MAIN CSS GRID CODE */
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100px 100px 100px;
  grid-gap: 13px;
}

/* =============================== */

html,
body {
  background: #ffeead;
  height: 100%;
  padding: 10px;
}

.container > div:nth-child(1n) {
  background: #ce96ca;
}

.container > div:nth-child(3n) {
  background: #88d8b0;
}

.container > div:nth-child(2n) {
  background: #ff6f69;
}

.container > div:nth-child(4n) {
  background: #ffcc5c;
}