.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
    grid-template-rows: 1fr 4fr 4fr 1fr;
}

.container > div {
    font-size: 20px;
}

.item1 {
    grid-column-start: 1;
    grid-column-end: 9;
    grid-row-start: 1;
    grid-row-end: 2;
    height: 100px;
    background-color: black;
    color: red;
}

.item2 {
    grid-column-start: 2;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 3;
    background-color: black;
    color: red;
    padding: 20px;
}

.item3 {
    grid-column-start: 6;
    grid-column-end: 8;
    grid-row-start: 2;
    grid-row-end: 3;
    background-color: purple;
    color: red;
    padding: 10px;
    }

.item4 {
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 4;
    background-color: rgb(0, 255, 191);
    color: red;
    padding: 10px            
}

.item5 {
    grid-column-start: 5;
    grid-column-end: 8;
    grid-row-start: 3;
    grid-row-end: 4;
    background-color: rgb(76, 0, 255);
    color: red;
    padding: 10px;
}

.item6 {
    grid-column-start: 1;
    grid-column-end: 9;
    grid-row-start: 4;
    grid-row-end: 5;
    background-color: rgb(255, 0, 0);
    color: purple;
    padding: 10px;
}

h1 {
    text-align: center;
}

body {
    background-color: maroon;
}

#img1 {
    width: 100%;
}

#img2 {
    width: 100%;
}

#img3 {
    width: 100%;
}