<div class="shopWrapper sw1 _active">    
        <div class="shopWrapper__cell">7</div>
        <div class="shopWrapper__cell">8</div>
        <div class="shopWrapper__cell">9</div>
        <div class="shopWrapper__cell">10</div>
        <div class="shopWrapper__cell">11</div>
        <div class="shopWrapper__cell">12</div>
        <div class="shopWrapper__cell">13</div>
        <div class="shopWrapper__cell">14</div>
        <div class="shopWrapper__cell">15</div>
        <div class="shopWrapper__cell">16</div>
        <div class="shopWrapper__cell">17</div>
        <div class="shopWrapper__cell">18</div>
      </div>

  .shopWrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    &__cell {
      border: 1px solid black;
      min-width: 16.6666667vw;
      min-height: 16.6666667vw;
    }
   }
.shopWrapper__cell:hover {
  background-color: var(--random-color);
}

const cell = document.getElementsByClassName('shopWrapper__cell');


for (const c of cell) {
  c.addEventListener('mouseover', function () {
    const color = `#${Math.random().toString(16).slice(2, 8).padEnd(6, 0)}`;
    this.style.setProperty('--random-color', color);
  } );
}