.grid{
    height:97vh;
        display: grid;
        grid-template-columns:repeat(10, 1fr);
        grid-template-rows: repeat(10, 1fr);
    }
.top{
    background-color: blue;
    opacity: 80%;
    grid-row:1/3;
    grid-column:1/11;
}
.top2{
    background-color: yellow;
    opacity: 80%;
    grid-row:3;
    grid-column:1/11;
}
.bottom{
    background-color: purple;
    opacity: 80%;
    grid-row:10;
    grid-column:1/11;
}
.center{
    background-color: aqua;
    opacity: 80%;
    grid-row:4/10;
    grid-column:1/11;
}
.left{
    background-color: orange;
    opacity: 80%;
    grid-row:1/11;
    grid-column:1;

}
.right{
    background-color: orange;
    opacity: 80%;
    grid-row:1/11;
    grid-column:10;
}