Se implementa una cuadrícula utilizando CSS flexbox.Ejemplo:

El número de filas en este ejemplo es 4 porque arreglé el ancho del contenedor para fines de demostración. Pero, en realidad, puede cambiar según el ancho del contenedor (por ejemplo, si el usuario cambia el tamaño de la ventana). Intente cambiar el tamaño de la ventana Salida eneste ejemplo para tener un sentimiento

Siempre hay un elemento activo, marcado con el borde negro.

Con JavaScript, permito a los usuarios navegar al elemento anterior / siguiente usando la flecha izquierda / derecha. En mi implementación, solo disminuyo / aumento el índice del elemento activo en 1.

Ahora, me gustaría permitir que los usuarios naveguen hacia arriba / abajo también. Para eso, solo necesito disminuir / aumentar el índice del elemento activo en<amount of items in a row>. Pero, ¿cómo calculo este número dado que depende del ancho del contenedor? ¿Hay una mejor manera de implementar la funcionalidad arriba / abajo?

.grid {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 250px;
  height: 200px;
  background-color: #ddd;
  padding: 10px 0 0 10px;
}

.item {
  width: 50px;
  height: 50px;
  background-color: red;
  margin: 0 10px 10px 0;
}

.active.item {
  outline: 5px solid black;
}

<div id="grid" class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item active"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>