v-row内の最後の行をレスポンシブで左詰めにしたい

Question

前提・実現したいこと

vuteify2で、v-card内に数十個のv-btnが複数行に渡って横並びになり、モニタの幅に応じて行の幅が変わるようにしたいです。

発生している問題・エラーメッセージ

v-card内にv-rowを1つ作り、その中に数十個分のv-colを作ることである程度は実現できたのですが、以下のように一番最後の行だけアイコンの間が大きく広がってしまいます。

該当のソースコード

    <v-overlay :value=char_select>
      <v-sheet max-width=1000 height=800 rounded=lg>
        <v-card>
          <v-card-title>
            <v-card-action>
            <v-btn @click="char_select=false">
              <v-icon class="mr-2">mdi-close</v-icon>閉じる
            </v-btn>
            </v-card-action>
          </v-card-title>
          <v-sheet class="pl-4 pr-4 pb-4">
            <v-row
              dense
              justify="start"
            >
              <v-col
                v-for="char_name of char_names"
                :key="char_name"
              >
                <v-btn 
                  icon
                  x-large
                  @click="char_select=false"
                >
                  <v-avatar :color="getCharColor(char_name)">
                  </v-avatar>
                </v-btn>
              </v-col>
            </v-row>
          </v-sheet>
        </v-card>
      </v-sheet>
    </v-overlay>

試したこと

v-row内の最後に透明なv-colを空いてる数だけ詰め込むと目的の表示が得られました。詰め込む数＝現在の空いてる数にする方法は思いつきませんでした。。

            <v-row
              dense
              justify="start"
            >
              <v-col
                v-for="char_name of char_names"
                :key="char_name"
              >
                <v-btn 
                  icon
                  x-large
                  @click="char_select=false"
                >
                  <v-avatar :color="getCharColor(char_name)">
                    <v-img :src="getCharIcon(char_name)"></v-img>
                  </v-avatar>
                </v-btn>
              </v-col>
              <v-col><v-btn icon x-large></v-btn></v-col>
              <v-col><v-btn icon x-large></v-btn></v-col>
              <v-col><v-btn icon x-large></v-btn></v-col>
              <v-col><v-btn icon x-large></v-btn></v-col>
              <v-col><v-btn icon x-large></v-btn></v-col>
              <v-col><v-btn icon x-large></v-btn></v-col>
              <v-col><v-btn icon x-large></v-btn></v-col>
              <v-col><v-btn icon x-large></v-btn></v-col>
              <v-col><v-btn icon x-large></v-btn></v-col>
              <v-col><v-btn icon x-large></v-btn></v-col>
            </v-row>

バージョンは以下の通りです。ご回答よろしくお願いいたします。

"core-js": "^3.6.5",
"vue": "^2.6.11",
"vuetify": "^2.4.0"

Answer 1

一撃では答えられないのですが、円の直径は決まっているんですよね？
画面幅 / 直径とかで、円の一列あたりの数を出して、円全体の個数%一列当たりの円の数(割ったあまり)で、最後の行の円の数を出して、一列当たり円の数 - 最後の行の円の数を出して、その数分だけv-forで空白のcolを埋めるのとかはどうでしょうか。