<div class="container">
  <div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
</div>

body{
  display:flex;
  justify-content: center;
  
}
.container{
  width: 330px;
  height:300px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.div{
  background: #333;
  color: #fff;
  width: 100px;
  height: 100px;
  border-radius: 5px;
}
.active{
  background: red;
}

let active = 4;
const side = 3;
const container = document.querySelector('div.container');
const toPoint = n => {
  const x = n % side;
  const y = Math.floor(n / side);
  return { x, y };
};
const toN = ({ x, y }) => side * y + x;
const render = () => {
  Array.from(container.children).forEach((el, i) => {
    el.classList.toggle('active', i === active);
  });
};

const onKeyDown = ({ key }) => {
  const point = toPoint(active);
  if (key === 'ArrowUp') point.y--;
  else if (key === 'ArrowDown') point.y++;
  else if (key === 'ArrowLeft') point.x--;
  else if (key === 'ArrowRight') point.x++;
  else return;
  
  point.x = Math.max(0, Math.min(side - 1, point.x));
  point.y = Math.max(0, Math.min(side - 1, point.y));  
  active = toN(point);
  render();
};

document.addEventListener('keydown', onKeyDown);
render();