Chapter 07

グリッドシステム

sosa
sosa
2023.01.02に更新
このチャプターの目次

グリッドシステムはcontainer、row、colを使ってコンテンツの配置や調整を行います。containerが大枠でrowが中枠、colが小枠と考えるとイメージしやすいかと思います。基本的な使い方はcontainerで囲ってrowとcolをいろいろ変えていきます。具体的に実験すると分かりやすいと思いますのでコードを変えます。もう使わない部分の説明もしておくとtemplate(v-for、V-ifを使うとき)はビルド後のタグの数を減らす目的なので動作理解には必要ないです。v-for="n in 4"はループで、このタグ内を4回繰り替えします。その際nは1ずつ増えていきます。

以下のように<v-container></v-container>の中を変えてください。

<v-container>
        <v-row>
            <v-col cols="4">
              <v-sheet height="150"></v-sheet>
            </v-col>
            <v-col cols="4">
              <v-sheet height="150"></v-sheet>
            </v-col>
            <v-col cols="4">
              <v-sheet height="150"></v-sheet>
            </v-col>
        </v-row>
</v-container>

v-app-barが広がるのを防ぎたい場合はv-app-barにmax-height="50"を追加すれば高さ制限できます。

    <v-app-bar
      class="mt-4"
      max-height="50"
      color="deep-purple"
      dark
    >

<r-row></r-row>の中は12個のブロックが均等に配置されます。各v-colのcols="n"の値によりデザインが変わります。<r-row></r-row>の中のcolsは合計が12にするのが基本ルールです。
今、各cols="4 になっているので均等にブロックが3つ並んでいます。今度はcolsを3,3,6としてください。合計は12です。そうすると最初の2個に比べて最後のブロックが倍の大きさになります。
合計が12以下だったらどうなるでしょうか。colsを2,2,2としてください。画面の左半分に3つブロックが均等にならび右半分は空欄になります。合計が12以上の場合もやってみまう。colsを6,6,6にしてください。すると2行になり1行目に6,6の2つ入り合計が12以上になってしまう最後の6は2行目の左半分だけになります。excelなど表の場合rowは行ですが、グリッドの場合、枠と考えた方がいいと思います。またcolsのようにrowsというpropはありません。colでブロックの配置を決める形になります。<v-row></v-row>をもう1組下にコピペして全部で6個のブロックでcolsの値をいじって色々試してみてください。実験が終わったら4,4,4の最初の状態に戻してください。

ブレークポイント

レスポンシブとはパソコン、スマフォなど画面サイズが違うものに対応してデザインを変えていくということです。今作っているものはレスポンシブになっています。画面サイズを縮小しても全体が見れてデザインがくずれることはありません。しかし画面サイズが小さいと、各ブロックがどんどん小さくなってしまいます。普通は画面のサイズに合わせて列数を減らしていきます。グリッドシステムでは簡単にできます。Material Designブレークポイントpropをv-colで設定するだけです。ブレークポイントはxs,sm,md,lg,xlと5段階に分かれていますが全部設定する必要ありません。先ほど設定していたcolsは1番小さいサイズの設定になります。つまりブレークポイントが設定されていないので、どの画面サイズでも同じ設定になっています。試しにひとつmdを設定してみます。設定値はcolsと同じ考え方です。colsを12,12,12としてmdを4,4,4にします。

<v-col cols="12" md="4">

画面のサイズを縮めていくと3列が1列に変わるのが分かると思います。mdではなくてsmやxsまたは複数使って動作確認してみてください。