.item-color-grid-container{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2,50px);
    /* border:0.2px solid black; */
    gap:0px;
    width:250px; /* each cell is 50px: height and width */
}



.grid-item:hover{
    cursor: pointer;
}

.select-active{
    border:0.2px solid black;
}



/* row items */
.item-1-1 {grid-row: 1; grid-column: 1;}
.item-1-2 {grid-row: 1; grid-column:2;}
.item-1-3 {grid-row: 1; grid-column:3;}
.item-1-4 {grid-row: 1; grid-column:4;}
.item-1-5 {grid-row: 1; grid-column:5;}

/* column items */
.item-2-1 {grid-row:2; grid-column:1;}
.item-2-2 {grid-row:2; grid-column:2;}
.item-2-3 {grid-row:2; grid-column:3;}
.item-2-4 {grid-row:2; grid-column:4;}
.item-2-5 {grid-row:2; grid-column:5;}