.grid {
    width: 800px;
    margin: auto;
    border: black solid 2px;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    grid-template-areas: 
    "ett ett ett ett ett ett"
    "tva tva tva tva tva tva"
    "tre tre fyr fyr fem fem"
    "sex sex sex sex sex sex"
    "sju sju sju atta atta atta"
    "nio nio nio nio nio nio";
}

.grid1 {
    grid-area: ett;
    background-color: black;
    color: white;
    text-align: center;
    border: black solid 1px;
}

.grid2 {
    grid-area: tva;
    background-color: gray;
    border: black solid 1px;
}

.grid3 {
    grid-area: tre;
    background-color: white;
    border: black solid 1px;
}

.grid4 {
    grid-area: fyr;
    background-color: white;
    border: black solid 1px;
}

.grid5 {
    grid-area: fem;
    background-color: white;
    border: black solid 1px;
}

.grid6 {
    grid-area: sex;
    background-color: gray;
    border: black solid 1px;
}

.grid7 {
    grid-area: sju;
    background-color: white;
    border: black solid 1px;
}

.grid8 {
    grid-area: atta;
    background-color: white;
    border: black solid 1px;
}

.grid9 {
    grid-area: nio;
    background-color: darkgrey;
    text-align: center;
    border: black solid 1px;
}

.stor {
    font-size: 50px;
}

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.ovningb {
    margin: auto;
    width: 800px;
    border: black solid 2px;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-areas:
    "et et et et et"
    "tv tv tv tr tr"
    "fy fe se sj at"
    "ni ni ni ni ni";
}

.box1 {
    grid-area: et;
    background-color: black;
    border: black solid 1px;
    text-align: center;
    color: white;
}

.box2 {
    grid-area: tv;
    background-color: gray;
    border: black solid 1px;
}

.box3 {
    grid-area: tr;
    background-color: gray;
    border: black solid 1px;
}

.box4 {
    grid-area: fy;
    background-color: white;
    border: black solid 1px;
}

.box5 {
    grid-area: fe;
    background-color: white;
    border: black solid 1px;
}

.box6 {
    grid-area: se;
    background-color: white;
    border: black solid 1px;
}

.box7 {
    grid-area: sj;
    background-color: white;
    border: black solid 1px;
}

.box8 {
    grid-area: at;
    background-color: white;
    border: black solid 1px;
}

.box9 {
    grid-area: ni;
    background-color: darkgrey;
    border: black solid 1px;
    color: black;
    text-align: center;
}