Vuetifyのグリッドレイアウトを使って要素を横並びにしたい

やりたいこと

vuetify2系のグリッドシステムを使って要素を横並びにしたいです。
下記画像のように縦並びではなく横に表示されるイメージです。

わからないこと

vuetifyの公式をみてjustifyやalignなど色々試したのですが、横並びにするにはどこにどう書けば良いかわからず詰まっております。。
classをつけてdisplay:flexをすれば横並びにはなるのですが、他にグリッドレイアウトをうまく使った良い方法があるのではないかと思い質問させていただきました。

初歩的な質問で大変申し訳ないのですが、ご教授いただけると幸いです。よろしくお願いいたします！

今現在のコード内容

Vue.js
1<template>
2<v-container>
3  <v-row>
4    <v-col cols="12" sm="6" md="3">
5      <v-card height="560px">
6      <v-row>
7        <v-col class="text">
8          <p>{{ text1 }}</p>
9          <p>{{ text2 }}</p>
10          <p>{{ text3 }}</p>
11        </v-col>
12      </v-row>
13        <p>{{ name }}</p>
14        <p>{{ date }}</p>
15      </v-card>
16    </v-col>
17  </v-row>
18</v-container>
19
20</template>
21
22<script>
23export default {
24  props: {
25    name: {
26      type: String,
27      required: true,
28    },
29    date: {
30      type: String,
31      required: true,
32    },
33    text1: {
34      type: String,
35      required: true,
36    },
37    text2: {
38      type: String,
39      required: true,
40    },
41    text3: {
42      type: String,
43      required: true,
44    },
45  },
46};
47</script>
48
49<style lang="scss">
50.text {
51  font-size: 2.8rem;
52  writing-mode: vertical-rl;
53}
54</style>

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

回答1件

ベストアンサー

コードを見る限り、これは子コンポーネントで親コンポーネントからv-forなどで複数呼び出すものだと予想しました。

F12からその箇所を見ればわかると思いますが、
コンポーネントを呼び出す度に、containerが作成されているのではないかと思います。

多分こんな感じ
<div class="container">
 <div class="row">
 ...
 ...
 </div>
</div>

<div class="container">
 <div class="row">
 ...
 ...
 </div>
</div>

同じv-rowの中にv-colを入れないと効かないので、
親コンポーネントで

<v-container>
  <v-row>
    // コンポーネントをv-forで回す
  </v-row>
</v-container>

を書いて、この中で下記子コンポーネントをv-forで呼び出してみてください。

<template>
  <v-col cols="3"> // colsなどは自由に決めてください
    <v-card height="560px">
      <v-row>
        <v-col class="text">
          <p>{{ text1 }}</p>
          <p>{{ text2 }}</p>
          <p>{{ text3 }}</p>
        </v-col>
      </v-row>
      <p>{{ name }}</p>
      <p>{{ date }}</p>
    </v-card>
  </v-col>
</template>

// scriptやcss

投稿2020/12/14 02:46

編集2020/12/14 05:06