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

.container > div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  color: #ffeead;
}

html,
body {
  background: #ffeead;
  padding: 10px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 28px;
}

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

/* MAIN CSS GRID CODE */
.container {
  height: 100%;
  display: grid;
  grid-template-columns: 200px 200px;
  grid-gap: 13px;

  grid-template-rows: 50px auto 50px;
}

/* The grid-row and grid-column property */

.header {
  grid-column: 1/3;
}

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

.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;
}

.grid-item:is(:nth-child(3), :nth-child(5), :nth-child(8), :nth-child(12), :nth-child(17)) {
  grid-column: span 3;
  grid-row: span 2;
}