*
{
    box-sizing: border-box;
}
body
{
    font-weight: bold;
    font-size: 2em;
    font-family: sans-serif;
    gap: 10px;
}
.container1, .container2, .container3, .container4
{
    display: grid;
    width: 80%;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: auto auto auto auto;
    gap: 10px;
    padding: 10px;
}
.container1
{
    background-color: #44dd44;
}
.container2
{
    background-color: #505fff;
}
.container3
{
    background-color: #fba003;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto;
}
.container1 > div,
.container2 > div,
.container3 > div,
.container4 > div{
    border: 1px solid black;
    text-align: center;
    padding: 10px;
    background-color: #dddddda8;
}
.container1 .item1
{
grid-row:1/5;
}
.container1 .item2
{
    grid-column:2/5;
}
.container1 .item8
{
    grid-row: 3/5;
    grid-column: 4/5;
}
.container1 .item9
{
    grid-column: span 2;

}
.container2 .item2
{
    grid-row: 1/3;
    grid-column: 2/4;
}
.container2 .item4, .container2 .item5
{
    grid-row: 2/4;
}
.container2 .item8, .container2 .item9
{
    grid-column: span 2;
}
.container3 .item1
{
    grid-column: 1/6;
}
.container3 .item2, .container3 .item3
{
    grid-column: span 2;
    grid-row: span 2;
}
.container3 .item7, .container3 .item9
{
    grid-column: span 4;
}
.container4
{
    grid-template-areas:'aBox bBox bBox bBox'
                        'aBox . . .'
                        'aBox . . hBox'
                        'aBox iBox iBox hBox' ;
    background-color: #44dd44;
}