style.css

body, html {
    margin: 0;
    height: 100%;
}

.grid-container {
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(4, 1fr);
    height: 50%;
    justify-items: center;
}

div {
    width: 4rem;
    height: 4rem;
    background-color: purple;
    color: white;
}

#a1 {
    grid-column:  1 / 2;
    grid-row: 1 / 2;
    align-self: flex-end;
}

#a2 {
    grid-column:  2 / 3;
    grid-row: 1 / 2;
    align-self: flex-end;
}

#a3 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    align-self: flex-end;
}

#a4 {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
    align-self: flex-end;
}

#b1 {
    grid-column:  1 / 2;
    grid-row: 3 / 4;
}

#b2 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}

#b3 {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}

#b4 {
    grid-column: 4 / 5;
    grid-row: 3 / 4;
}
.svg {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    background-color: rgba(55, 238, 238, 0.422);
    /* align-self: stretch; */
    /* justify-self: stretch; */
    width: 100%;
    height: 100%;
}

.chosen {
    border: solid 3px black;
    background-color: rgb(12, 168, 1);
}

#path1 {
    z-index: 1
}
#path2 {
    z-index: 2
}
#path3 {
    z-index: 3
}
#path4 {
    z-index: 4
}