v-cardを中央に寄せて並べたい

nuxt.jsでページをつくっている中でv-cardを一枚目の画像のように並べたいのですが、なぜか二枚目の画像のように縦に全て並んでしまいます。

作りたいもののイメージ↓

現在↓

現在のv-card部分のコードはこんな感じになっています

nuxt.js
1<template>
2<div>
3 <v-row  display="flex" justify="center" >
4  <v-col cols=12 sm=10 md=8 lg=4 xl=3>
5    <v-card outlined tile height=300 style="display: flex; justify-content: center; align-items: center;"><nuxt-link to="/timeline">timeline</nuxt-link></v-card>
6    <v-card outlined tile height=300 style="display: flex; justify-content: center; align-items: center;">profile</v-card>
7    <v-card outlined tile height=300 style="display: flex; justify-content: center; align-items: center;">post</v-card>
8    <v-card outlined tile height=300 style="display: flex; justify-content: center; align-items: center;">explore</v-card>
9  </v-col>
10</v-row>
11  <div class="bg"></div>
12    <div class="bg bg2"></div>
13    <div class="bg bg3"></div>
14</div>
15</template>

11から14行は背景なので関係ないとは思いますが、一応載せておきます。

hon.ki

2021/09/05 06:04

ご提示のスクショの状態での、{{ $vuetify.breakpoint.name }}の値が知りたいです。(どれが効いているのか確認したいため)

行動規範の内容に同意します

回答1件

 <v-row  >
  <v-col cols="6">
    <v-card outlined tile height=300 ><nuxt-link to="/timeline">timeline</nuxt-link></v-card>
  </v-col>
  <v-col cols="6">
    <v-card outlined tile height=300 >profile</v-card>
  </v-col>
  <v-col cols="6">
    <v-card outlined tile height=300>post</v-card>
  </v-col>
  <v-col cols="6">
    <v-card outlined tile height=300 >explore</v-card>
  </v-col>
</v-row>

例えばこんなので、どうでしょうか　欲しい状態に近づきますか？

投稿2021/09/05 06:02

hon.ki

総合スコア157