.container {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "header header header header"
                       "main main . sidebar"
                       "footer footer footer footer";
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.grid-item div {
  display: flex;
  color: #fff;
  font-size: 1.5rem;
  justify-content: center;
  align-items: center;
  height: 100%;
}

header {
  background-color: #FF708C;
  grid-area: header;
}

main {
  background-color: #E8665A;
  grid-area: main;
}

aside {
  background-color: #FF8763;
  grid-area: sidebar;
}

.footer {
  background-color: #E85ABD;
  grid-area: footer;
}