.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto;
place-self: center;
grid-template-areas: 
"header header header header header"
"left left left right right"
"l1 l2 l3 l4 l5"
"down down down down down"
;
width: 800px;
background-color: blueviolet;
border: black 3px solid;
text-align: left;
}

.grid-container div {
    border: 1px black solid;
}

.item1 { grid-area: header;
    text-align: center;
    background-color: gray;

}

.item2 { grid-area: left;
    background-color: blue;

}

.item3 { grid-area: right;
background-color: pink;
}

.item4{ grid-area: l1;
background-color: green;
}

.item5{ grid-area: l2;
background-color: red;
}

.item6{ grid-area: l3;
background-color: white;
}

.item7{ grid-area: l4;
background: turquoise;
}

.item8{ grid-area: l5;
background-color: yellow;
}

.item9{ grid-area: down;
    text-align: center;
 background-color: lightseagreen;
}


h1, h2,h3 {
    margin: 0px;
    padding: 0px;
}

.span {
    font-size: 46px;
}