html {
  font-family: sans-serif;
}

body {
  padding: 0;
  margin: 0;
}

header {
  background: rgb(52, 206, 142);
  height: 100px;
}

h1 {
  text-align: center;
  color: white;
  line-height: 100px;
  margin: 0;
}

article {
  padding: 10px;
  margin: 10px;
  background: rgba(16, 233, 215, 0.178);
}

.grid{
  display: grid;
  grid-template: repeat(4, 1fr) / repeat(4, 1fr);
  grid-template-areas:
    "one two three three"
    "one four three three"
    "one five six seven"
    "eight nine nine ten";
}

article:nth-child(1){
  grid-area: one;
}

article:nth-child(2){
  grid-area: two;
}

article:nth-child(3){
  grid-area: three;
}

article:nth-child(4){
  grid-area: four;
}

article:nth-child(5){
  grid-area: five;
}

article:nth-child(6){
  grid-area: six;
}

article:nth-child(7){
  grid-area: seven;
}

article:nth-child(8){
  grid-area: eight;
}

article:nth-child(9){
  grid-area: nine;
}

article:nth-child(10){
  grid-area: ten;
}