#app {
  display: flex;
  flex-wrap: wrap;
  padding: 2rem;
  justify-content: space-between;
}

.square {
  font-size: 5rem;
  flex: 0 0 auto;
  padding: 2rem;
  background: yellow;
  color: orange;
  cursor: pointer;
}
.square.inactive {
  visibility: hidden;
  pointer-events: none;
}
.square.focused {
  z-index: 2;
}

.square:nth-of-type(2n + 0) {
  background: green;
  color: #1aff1a;
}

.square:nth-of-type(4n + 0) {
  background: blue;
  color: #9999ff;
}

.square:nth-of-type(5n + 3) {
  background: red;
  color: #ff9999;
}

.square {
  border-radius: 50%;
  width: 5rem;
  height: 5rem;
  text-align: center;
}