style.css

*{
    padding: 0;
    margin: 0;
}

#container{
    width: 95vw;
    height: 100vh;
    margin: 0 auto;
    padding: 10px;
    background-color: whitesmoke;
    outline: 6px solid blue;
    display: grid;
    grid-template-columns: [col-start]1fr [col-2]1fr [col-3]1fr [col-end];
    gap: 10px;
}

.item1{
    grid-column: 1 / 4;
    border: 1px solid black;
    background-color: green;

}

.item2{
    grid-area: 2 / 1 / 3 / 3 ;
    border: 1px solid black;
    background-color: rgb(93, 93, 139);

}

.item3{
    grid-area: 2 / 4 / 4 / 3 ;
    border: 1px solid black;
    background-color: rgb(93, 93, 139);

}

.item4{
    grid-area: 3 / 1 / 5 / 3;
    border: 1px solid black;
    background-color: rgb(93, 93, 139);

}

.item5{
    grid-area: 4 / 4 / 4 / 3;
    border: 1px solid black;
    background-color: green;

}

.item6{
    grid-column: 1 / 4;
    border: 1px solid black;
    background-color: green;

}