.item1 {
    grid-area: header;
    background-color: rgb(95, 95, 95);
    height: 70px;
    color: white;
    text-align: center;
    border: black solid 1px;
    padding: 5px;   
}

.item2 {
    grid-area: mellan1;
    background-color: rgb(196, 196, 196);
    border: black solid 1px;
    padding: 5px;
}

.item3 {
    grid-area: main1;
    background-color: rgb(236, 236, 236);
    border: black solid 1px;
    padding: 5px;
}

.item4 {
    grid-area: main2;
    background-color: rgb(236, 236, 236);
    border: black solid 1px;
    padding: 5px;
}

.item5 {
    grid-area: main3;
    background-color: rgb(236, 236, 236);
    border: black solid 1px;
    padding: 5px;
}

.item6 {
    grid-area: mellan2;
    background-color: rgb(196, 196, 196);
    border: black solid 1px;
    padding: 5px;
}

.item7 {
    grid-area: main4;
    background-color: rgb(236, 236, 236);
    border: black solid 1px;
    padding: 5px;
}

.item8 {
    grid-area: main5;
    background-color: rgb(236, 236, 236);
    border: black solid 1px;
    padding: 5px;
}

.item9 {
    grid-area: footer;
    background-color: rgb(138, 138, 138);
    border: black solid 1px;
    text-align: center;
    padding: 20px;  
}



.grid-container {
    display: grid;
    grid-column: auto auto auto auto auto auto;
    grid-template-areas:
        'header header header header header header'
        'mellan1 mellan1 mellan1 mellan1 mellan1 mellan1'
        'main1 main1 main2 main2 main3 main3'
        'mellan2 mellan2 mellan2 mellan2 mellan2 mellan2'
        'main4 main4 main4 main5 main5 main5'
        'footer footer footer footer footer footer';
    margin: auto;
    width: 800px;
    border: 1px solid black;
}

span {
    font-weight: bold;
}

.text {
    font-size: 30px;
}

.grid-container2 {
    display: grid;
    grid-column: auto auto auto auto auto;
    grid-template-areas: 
    'h1 h1 h1 h1 h1'
    'h2 h2 h2 h3 h3'
    'm1 m2 m3 m4 m5'
    'foot foot foot foot foot';
    margin: auto;
    width: 800px;
    border: 1px solid black;
}

.item10 {
    grid-area: h1;
    background-color: rgb(95, 95, 95);
    height: 70px;
    color: white;
    text-align: center;
    border: black solid 1px;
    padding: 5px;   
}

.item11 {
    grid-area: h2;
    background-color: rgb(196, 196, 196);
    border: black solid 1px;
    padding: 5px;
}

.item12 {
    grid-area: h3;
    background-color: rgb(196, 196, 196);
    border: black solid 1px;
    padding: 5px;
}

.item13 {
    grid-area: m1;
    background-color: rgb(236, 236, 236);
    border: black solid 1px;
    padding: 5px;
}

.item14 {
    grid-area: m2;
    background-color: rgb(236, 236, 236);
    border: black solid 1px;
    padding: 5px;
}

.item15 {
    grid-area: m3;
    background-color: rgb(236, 236, 236);
    border: black solid 1px;
    padding: 5px;
}

.item16 {
    grid-area: m4;
    background-color: rgb(236, 236, 236);
    border: black solid 1px;
    padding: 5px;
}

.item17 {
    grid-area: m5;
    background-color: rgb(236, 236, 236);
    border: black solid 1px;
    padding: 5px;
}

.item18 {
    grid-area: foot;
    background-color: rgb(138, 138, 138);
    border: black solid 1px;
    text-align: center;
    padding: 20px;  
}