*{
    box-sizing: border-box;
}

body{
    font-weight: bold;
    font-size: 2em;
    font-family: sans-serif;
}

body > div{
    margin: 0 auto 10px auto;
}

.container, .container2, .container4
{
    display: grid;
    width: 80%;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
}

.container{
    background-color: green;
}

.container2{
    background-color: blue;
}

.container4{
    background-color: #fba003;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.container > div,
.container2 > div, 
.container3 > div,
.container4 > div
{
   border: 1px solid black;
   text-align: center;
   padding: 10px;
   background-color: #dddddd80;
   width: 100%;
}

/***Första containern***/
.container .item1{
    grid-row: 1/5;
}
.container .item2{
    grid-column: 2/5;
}

.container .item8{
    grid-row: span 2;
}

.container .item9{
    grid-column: span 2;
}

/***Andra containern***/

.container2 .item2{
    grid-column: span 2;
    grid-row: span 2;
}

.container2 .item5, .container2 .item4{
    grid-row: span 2;
}

.container2 .item8, .container2 .item9{
    grid-column: span 2;
}

/***Tredje containern***/

.container4 .item1{
    grid-column: 1/6;   
}

.container4 .item2, .container4 .item3{
    grid-column: span 2;
    grid-row: span 4;
} 

.container4 .item4, .container4 .item5{
    grid-column-start: 5;
    grid-row: span 2;
    
}

.container4 .item7, .container4 .item9{
    grid-column: span 4;
}