.hej2 {
    display: flex;
    justify-content: center;
    align-items: center;

}

.hej {
    display: grid;
    width: 800px;
    grid-template-rows: 60px 40px 150px 40px 150px 70px;
    grid-template-areas:
        'ett ett ett ett ett ett'
        'två två två två två två'
        'fyra fyra fem fem sex sex'
        'sju sju sju sju sju sju'
        'åtta åtta åtta nio nio nio'
        'tre tre tre tre tre tre';
}

.hej3 {
    display: grid;
    width: 800px;
    grid-template-rows: 60px 40px 150px 70px;
    grid-template-areas:
        'ett ett ett ett ett'
        'två två två sju sju'
        'fyra fem sex åtta nio'
        'tre tre tre tre tre';
}

.hej div,
.hej3 div {
    border: solid black 1px;
    font-size: 30px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.ett {
    grid-area: ett;
    color: white;
    background-color: dimgray;
}

.två {
    grid-area: två;
    background-color: lightgrey;
}

.fyra {
    grid-area: fyra;
}

.fem {
    grid-area: fem;
}

.sex {
    grid-area: sex;
}

.sju {
    grid-area: sju;
    background-color: lightgrey;

}

.åtta {
    grid-area: åtta;
}

.nio {
    grid-area: nio;
}

.tre {
    grid-area: tre;
    background-color: gray;
}