реализована с использованием CSS flexbox.Пример:

Количество строк в этом примере равно 4, потому что я установил ширину контейнера для демонстрационных целей. Но в действительности он может меняться в зависимости от ширины контейнера (например, если пользователь изменяет размеры окна). Попробуйте изменить размер окна вывода вэтот пример чтобы почувствовать.

Всегда есть один активный элемент, отмеченный черной рамкой.

Используя JavaScript, я позволяю пользователям переходить к предыдущему / следующему элементу, используя стрелку влево / вправо. В моей реализации я просто уменьшаю / увеличиваю индекс активного элемента на 1.

Теперь я бы хотел, чтобы пользователи также могли перемещаться вверх / вниз. Для этого мне просто нужно уменьшить / увеличить индекс активного элемента на<amount of items in a row>, Но как рассчитать это число, если оно зависит от ширины контейнера? Есть ли лучший способ реализовать функциональность вверх / вниз?

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