h1, h2, h3 {
  margin: 10px;
}
ul {
  list-style-type: none;
  margin: 10px;
  padding: 0px;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-template-rows: auto auto auto auto auto auto;
  border: 2px black solid;
  width: 800px;
  place-self: center;
  grid-template-areas: 
  'q q q q q q'
  'w w w w w w'
  'e e r r t t'
  'y y y y y y' 
  'u u u i i i'
  'o o o o o o'
  ;
}
.grid-container div {
  border: 2px black solid;
}

.item1 {
  grid-area: q;
  text-align: center;
  color: white;
  background-color: lightslategray;
}
.item2 {
  grid-area: w;
  background-color: lightgrey;
}
.item3 {
  grid-area: e;
  background-color: lightblue;
}
.item4 {
  grid-area: r;
  background-color: lightblue;
}
.item5 {
  grid-area: t;
  background-color: lightblue;
}
.item6 {
  grid-area: y;
  background-color: lightgray;
}
.item7 {
  grid-area: u;
  background-color: lightblue;
}
.item8 {
  grid-area: i;
  background-color: lightblue;
}
.item9 {
  grid-area: o;
  text-align: center;
  padding: 10px;
  color: white;
  background-color: lightslategray;
}
.uppercase {
  font-size: 48px;
}