Фиксация номера элемента в каждой строке

Question

<template>
  <div @keyup="moveIndex" tabindex="0">
    <h2>Kanal Listesi</h2>
    <div class="container">
      <div v-for="(channel,index) in channels" :key="index">
        <div v-if="channel.ChName">
          <img
            :src="'http://uyanik.tv/conf/images/'+channel.Image"
            height="100px"
            :class="{selectedIndex:currentIndex === index}"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import channelz from "../trsubs.channels.json";
export default {
  data() {
    return {
      channels: channelz.Root.Channels.Channel,
      currentIndex: 1,
      channelPerRow: 9
    };
  },

}
</script>

<style scoped>
.selectedIndex {
  border: 5px solid;
  border-color: aquamarine;
  opacity: 0.6;
  transition: 0.2s;
}
.container {
  display: flex;
  flex: 1 1 auto;
  flex-flow: row wrap;
  align-items: flex-start;
}
div > div > div > div > img{
  margin: 10px 10px 10px 10px;
}
</style>

В настоящее время я пытаюсь зафиксировать количество элементов в каждой строке в моем шаблоне, потому что приложение будет в основном использоваться на различных устройствах с более низким разрешением. Нет ли способа зафиксировать номер элемента в строке независимо от разрешения устройства? Спасибо!