body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.principal{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr; 
    background-color: black
}

.item1{
    grid-column: 1/2;
    grid-row: 1/2;
    background-color: lightgreen;
    color: white; 
    margin: 0.2% ; 
    height: 100px;
}

.item2{
    grid-column: 2/3;
    grid-row: 1/2;
    background-color:lightgreen;
    color: white;
    margin: 0.2% 
}
.item3{
    grid-column: 3/4;
    grid-row: 1/2;
    background-color:lightgreen;
    color: white; 
    margin: 0.2%
}
.item4{
    grid-column: 4/5;
    grid-row: 1/2;
    background-color:lightgreen;
    color: white; 
    margin: 0.2% 
}
.item5{
    grid-column: 1/2;
    grid-row: 2/6;
    background-color:lightskyblue;
    color: white;
    margin: 0.2% 
}

.item6{
    grid-column: 2/3;
    grid-row: 2/5;
    background-color:yellow;
    color: white;
    margin: 0.2% 
}

.item7{
    grid-column: 3/4;
    grid-row: 2/5;
    background-color:yellow;
    color: white;
    margin: 0.2% 
}

.item8{
    grid-column: 2/3;
    grid-row: 5/6;
    background-color:darkgray;
    color: white;
    margin: 0.2% 
    
}

.item9{
    grid-column: 3/4;
    grid-row: 5/6;
    background-color:darkgray;
    color: white;
    margin: 0.2% 
}

.item10{
    grid-column: 4/5;
    grid-row: 2/6;
    background-color: lightgoldenrodyellow;
    color: white;
    margin: 0.2% 
}