body{
    display:flex;
    width:100vw;
    height:100vh;
    margin:0;
    padding:0;
    align-items: center;
    justify-content:center;
    background-color: grey;
}
.grid{
     background-color:grey;
    outline:2px solid grey;
    display: grid;
     width:80%;
    height:80%;
    gap:2px;
    grid-template-columns:repeat(3,calc(100% / 3));
    grid-template-rows:repeat(2,50%);
}
.color{
    width:100%;
    height:100%;
    background-color:rgb(0, 0, 0);
}
.bottom{
    grid-row-start: 2;
}
.top{
    grid-row-start: 1;
}