kazuki.m

Appearance

sumnail

Vuetifyのグリッドシステム

created at : 2024/08/29

Vue3
Vuetify

レスポンシブ ​

vuetify のグリッドシステムを使用すると、レスポンシブなレイアウトを簡単に作成できます。

v-container, v-row, v-col ​

vuetify のグリッドシステムは、v-container, v-row, v-col の 3 つのコンポーネントを組み合わせて使用します。

  • v-container : グリッド全体の幅を指定します。
  • v-row : 行を作成します。
  • v-col : 列を作成します。v-row の中に配置します。
1
2
3
4
5
サンプルコード
vue
<template>
  <v-container>
    <v-row class="outer-box">
      <v-col v-for="n in 5" :key="n" md="3" sm="4">
        <div class="box">{{ n }}</div>
      </v-col>
    </v-row>
  </v-container>
</template>

<style scoped>
.outer-box {
  background-color: #f0f0f0;
  padding: 16px;
}

.box {
  color: var(--main-color);
  background-color: var(--main-bg-color);
  border: 1px solid #ccc;
  padding: 16px;
}
</style>

cols ​

v-col に cols プロパティを指定すると、列の幅を指定できます。

以下は、cols を指定したグリッドのサンプルです。

cols="3" ​

1
2
3
4
5

cols="4" ​

1
2
3
4
5

cols="6" ​

1
2
3
4
5
サンプルコード
vue
<template>
  <v-container>
    <v-row class="outer-box">
      <v-col v-for="n in 5" :cols="cols">
        <div class="box">{{ n }}</div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup lang="ts">
const props = defineProps<{ cols: number }>();
</script>

<style scoped>
.outer-box {
  background-color: #f0f0f0;
  padding: 16px;
}

.box {
  color: var(--main-color);
  background-color: var(--main-bg-color);
  border: 1px solid #ccc;
  padding: 16px;
}
</style>

No Gutters ​

v-row に no-gutters プロパティを指定すると、列間の余白を削除できます。
以下は、no-gutters を指定したグリッドのサンプルです。

先ほどのグリッドと比較して、列間の余白がないことがわかります。

1
2
3
4
5
サンプルコード
vue
<template>
  <v-container>
    <v-row no-gutters class="outer-box">
      <v-col v-for="n in 5" :key="n" md="3" sm="4">
        <div class="box">{{ n }}</div>
      </v-col>
    </v-row>
  </v-container>
</template>

<style scoped>
.outer-box {
  background-color: #f0f0f0;
  padding: 16px;
}

.box {
  color: var(--main-color);
  background-color: var(--main-bg-color);
  border: 1px solid #ccc;
  padding: 16px;
}
</style>

Nested Grids ​

グリッドはネストすることも可能です。

cols を指定したグリッドの中に、さらに cols を指定したグリッドを配置しています。

1
2
3
4
5
サンプルコード
vue
<template>
  <v-container>
    <v-row>
      <v-col cols="8" class="outer-box">
        <v-row>
          <v-col v-for="n in 5" :key="n" cols="4">
            <div class="box">{{ n }}</div>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </v-container>
</template>

<style scoped>
.outer-box {
  background-color: #f0f0f0;
  padding: 16px;
}

.box {
  color: var(--main-color);
  background-color: var(--main-bg-color);
  border: 1px solid #ccc;
  padding: 16px;
}
</style>

まとめ ​

vuetify のグリッドシステムを使用すると、レスポンシブなレイアウトを簡単に作成できます。

参考 ​