*{
    padding: 0;
    margin: 0;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.container{
    display: grid;
    grid-template-rows: repeat(6,1fr);
    grid-template-columns: 2fr repeat(5,1fr) 2fr;
    height: 500px;
    width: 1000px;
    background-color: rgb(74, 74, 74);
    padding: 10px;
    gap: 15px;
}
.first{
    grid-row: 1/4;
    background-color: red;
}
.eight{
    grid-row: 4/7;
    background-color: white;
}
.second{
    grid-column: 2/5;
    grid-row: 1/3;
    background-color: cyan;
}
.third{
    grid-column: 5/8;
    grid-row: 1/3;
    background-color: wheat;
}
.fourth{
    grid-column: 2/4;
    grid-row: 3/5;
    background-color: wheat;
}
.five{
    grid-column: 4/7;
    grid-row: 3/5;
    background-color: white;
}
.six{
    grid-row: 3/7;
    grid-column: 7/8;
    background-color: red;
}
.seven{
    grid-column: 2/5;
    grid-row: 5/7;
    background-color: red;
}
.nine{
    grid-column: 5/7;
    background-color: cyan;
    grid-row: 5/7;
}