Uma grade é implementada usando a caixa flexível CSS.Exemplo:

O número de linhas neste exemplo é 4 porque eu corrigi a largura do contêiner para fins de demonstração. Mas, na realidade, pode mudar com base na largura do contêiner (por exemplo, se o usuário redimensionar a janela). Tente redimensionar a janela Saída emeste exemplo para ter um pressentimento.

Sempre há um item ativo, marcado com a borda preta.

Usando JavaScript, permito que os usuários naveguem para o item anterior / próximo usando a seta esquerda / direita. Na minha implementação, apenas diminuo / aumento o índice do item ativo em 1.

Agora, eu gostaria de permitir que os usuários naveguem para cima / para baixo também. Para isso, só preciso diminuir / aumentar o índice do item ativo em<amount of items in a row>. Mas, como faço para calcular esse número, uma vez que depende da largura do contêiner? Existe uma maneira melhor de implementar a funcionalidade up / down?

.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>