.grid { column-gap: 0; grid-template-columns: repeat(auto-fit,minmax(0%,1fr)); } .cell { position: relative; margin: 0; height: 2.6em; } .line { position: absolute; top: 50%; transform: translateY(-50%); height: .6em; width: 100%; background-color: grey; z-index: -1; } /* Boule et couleur */ .ball { border-radius:50%; width: 2.5em; height: 2.5em; border:2px solid; margin-left: auto; margin-right: auto; cursor: pointer; } .red { background-color: #e53935; border-color: #e53935; } .pink { background-color: #d81b60; border-color: #d81b60; } .purple { background-color: #5e35b1; border-color: #5e35b1; } .indigo { background-color: #3949ab; border-color: #3949ab; } .blue { background-color: #039be5; border-color: #039be5; } .cyan { background-color: #00acc1; border-color: #00acc1; } .green { background-color: #43a047; border-color: #43a047; } .lime { background-color: #c0ca33; border-color: #c0ca33; } .yellow { background-color: #fdd835; border-color: #fdd835; } .amber { background-color: #ffb300; border-color: #ffb300; } .orange { background-color: #fb8c00; border-color: #fb8c00; }