Chapter 15無料公開

要素の幅を指定して横方向に並べる: GRID (v-row / v-col)

超Lチカ団編集局
超Lチカ団編集局
2024.01.14に更新

要素の幅を指定して横方向に並べる: GRID (v-row / v-col)

d-flex で横方向に並べることはできますが、要素ごとにサイズ(幅)を変えようとすると面倒です。

そんな時は <v-row><v-col> を使うことで、テーブルを作る要領で要素の配置ができます。

<template>
<v-container>
  <v-row>
    <v-col>  <v-btn>Hoge1</v-btn>  </v-col>
    <v-col>  <v-btn>Hoge2</v-btn>  </v-col>
    <v-col>  <v-btn>Hoge3</v-btn>  </v-col>
    <v-col>  <v-btn>Hoge4</v-btn>  </v-col>
  </v-row>
</v-container>
</template>

基本形は上記です。row が行に相当し、col が列に相当します。

image.png

デフォルトでは均等割り付けになります。

v-col で cols を指定すると、それぞれの要素の幅(の割合)を指定できます。1行あたりの横幅を12として、それぞれの col の横幅を 1-12 の整数で指定します。

<template>
<v-container>
  <v-row>
    <v-col cols="2">  <v-btn>Hoge1</v-btn>  </v-col>
    <v-col cols="2">  <v-btn>Hoge2</v-btn>  </v-col>
    <v-col cols="4">  <v-btn>Hoge3</v-btn>  </v-col>
    <v-col cols="4">  <v-btn>Hoge4</v-btn>  </v-col>
  </v-row>
</v-container>
<v-container>
  <v-row>
    <v-col cols="2">  <v-btn block>Hoge1</v-btn>  </v-col>
    <v-col cols="2">  <v-btn block>Hoge2</v-btn>  </v-col>
    <v-col cols="4">  <v-btn block>Hoge3</v-btn>  </v-col>
    <v-col cols="4">  <v-btn block>Hoge4</v-btn>  </v-col>
  </v-row>
</v-container>
</template>

結果:

image.png

<v-btn>block を指定すると、与えられた幅いっぱいに広がります。下の行は Block を指定しているので、HOGE1 のボタンに比べると、HOGE3、HOGE4は2倍の横幅になっていることが分かります。

セル内の要素の上下寄せ

セル内の要素を下に寄せるには、<v-col> のクラスで d-flex align-end を指定します。縦方向の中央揃えは align-center です。

<template>
  <v-container>
    <v-row>
      <v-col cols="2">  <v-btn block>Hoge1</v-btn>  </v-col>
      <v-col cols="2">  <v-btn block>Hoge2</v-btn>  </v-col>
      <v-col cols="4" class="d-flex align-end">
        <p>FOO BAR</p>
      </v-col>
      <v-col cols="4">  <v-btn block>Hoge4</v-btn>  </v-col>
    </v-row>
  </v-container>
</template>

結果:

image.png

セル内での中央寄せ

block を使わずに、要素を中央寄せするには <v-col>d-flex flex-row justify-center を指定します。

<v-col> 内の要素がひとつだけなら、mx-auto で中央に寄せることもできます。 Vuetify 3.3.6 でも寄せられなくなっています。バージョンアップしても寄せられないままなので、どうやら仕様のようです。

<template>
  <v-container>
    <v-row>
      <v-col cols="2">  <v-btn>Hoge1</v-btn>  </v-col>
      <v-col cols="2">  <v-btn>Hoge2</v-btn>  </v-col>
      <v-col cols="4">
        <v-btn>Hoge3</v-btn>
      </v-col>
      <v-col cols="4">  <v-btn>Hoge4</v-btn>  </v-col>
    </v-row>

    <v-row>
      <v-col cols="2">  <v-btn>Hoge1</v-btn>  </v-col>
      <v-col cols="2">  <v-btn>Hoge2</v-btn>  </v-col>
      <v-col cols="4" class="d-flex flex-row justify-center">
        <v-btn>Hoge3</v-btn>
      </v-col>
      <v-col cols="4">  <v-btn>Hoge4</v-btn>  </v-col>
    </v-row>

    <v-row>
      <v-col cols="2">  <v-btn>Hoge1</v-btn>  </v-col>
      <v-col cols="2">  <v-btn>Hoge2</v-btn>  </v-col>
      <v-col cols="4">
        <v-btn class="mx-auto">Hoge3</v-btn>
      </v-col>
      <v-col cols="4">  <v-btn>Hoge4</v-btn>  </v-col>
    </v-row>
  </v-container>
</template>

結果:

image.png

行送り

ひとつの行の cols の合計値が12を超えていると、自動的に次の行に改行します。

<template>
  <v-container>
    <v-row>
      <v-col cols="3" v-for="k in 10" :key="k">
        <v-btn block>
          HOGE{{k}}
        </v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

結果:

image.png

セルの縦方向の結合

セルを縦方向に結合することは、基本的にはできないぽいです。no-gutters を使うとセルの境目をなくすことができるので、連続しているセルが結合しているように見せることは可能です。

<template>
  <v-container >
    <v-row no-gutters >
      <v-col cols="12">
        <v-sheet class="bg-black pa-2">
          HOGE1
        </v-sheet>
      </v-col>
      <v-col cols="6">
        <v-sheet class="bg-black pa-2">
          HOGE2
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>

結果:

image.png

しかし、あくまで結合したように見せるだけなので <v-btn> のような境界のある要素の結合には使えません。

次の例のように、複数の <v-row> を横に並べることで、疑似的に結合したように見せることも可能です。ただ、ブラウザによって表示が崩れることがあるようなので、多分よくないです。

<template>
  <v-container class="d-flex flex-row">
    <div>
      <v-row>
        <v-col>
          <v-btn>HOGE1</v-btn>
        </v-col>
      </v-row>
      <v-row>
        <v-col>
          <v-btn>HOGE2</v-btn>
        </v-col>
      </v-row>
      <v-row>
        <v-col>
          <v-btn>HOGE3</v-btn>
        </v-col>
      </v-row>
    </div>
    <div class="d-flex flex-column pl-2">
      <v-row>
        <v-col>
          <v-btn height="6.8em">HOGE1</v-btn>
        </v-col>
      </v-row>
      <v-row class="pt-0">
        <v-col>
          <v-btn>HOGE2</v-btn>
        </v-col>
      </v-row>
    </div>
  </v-container>
</template>

結果:

image.png

他にいい方法があったら教えてください。

Grid System を使うと、かなり自由にレイアウトすることが可能です。Grid System について下記を参照してください。