*{
    box-sizing: border-box;

}

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

body > div
{
    display: grid;
    width:80%;
    grid-template-rows: 100px 100px 100px 100px;
    grid-template-columns: auto auto auto auto;
    gap: 20px 10px; background-color: #44dd44;
}

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

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




/*Container 1 */
.container .item1
{
    grid-row: span 4;

}

.container .item2
{
 grid-column: span 3;
}

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

}

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

/*Container 2 */
.container2
{
background-color: blue;
}

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

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

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



/*Container 3 */
.container3
{
    grid-template-rows: 100px 140px 140px 100px 40px;
    grid-template-columns: auto auto auto auto auto;
    background-color: orange;
  
}

.container3 .item1
{
    grid-column: span 5;
}
.container3 .item2
{
    grid-column: span 2;
    grid-row: span 2;
}
.container3 .item3
{
    grid-column: span 2;
    grid-row: span 2;
}
.container3 .item7
{
    grid-column: span 4;
}
.container3 .item9
{
    grid-column: span 4;
}
/*Container 4 */