VuetifyのGrid Systemとは？<v-col>を使う方法【初心者向け】
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
Vuetify の Grid System とは？
<v-col>を使う方法について初心者向けにまとめました。
Grid System とは？
Grid System（グリッドシステム） は、コンテンツを柔軟にレイアウトするための仕組みです。
Vuetify では Flexbox をベースにした 12 カラムのグリッドシステム を提供しており、レスポンシブなレイアウトを簡単に作成できます。
基本形
<v-row>
<v-col cols="4" class="bg-purple-darken-2"></v-col>
<v-col cols="4" class="bg-light-blue"></v-col>
<v-col cols="4" class="bg-lime"></v-col>
</v-row>結果
基本形の解説
v-rowを使って、コンテンツを横並びにします。
v-colにcols=を付けることで、横幅を指定します。
そして、colsの合計が 12 を超えると折り返します。
<v-row>
<v-col cols="4" class="bg-purple-darken-2"></v-col>
<v-col cols="4" class="bg-light-blue"></v-col>
<v-col cols="4" class="bg-lime"></v-col>
<v-col cols="4" class="bg-green">折り返す</v-col>
</v-row>
端数が出る とどうなるのか？
<v-row>
<v-col cols="4" class="bg-purple-darken-2"></v-col>
<v-col cols="4" class="bg-light-blue"></v-col>
<v-col cols="1" class="bg-lime"></v-col>
<v-col cols="4" class="bg-green">折り返す</v-col>
</v-row>
単数は切り捨てで、次の行にいきます。
具体的な使い方
コンテンツを均等に並べる
<v-row>
<v-col v-for="post in posts" cols="4" :key="`post${post.id}`">
<div>{{ post.title }}</div>
<div>{{ post.content }}</div>
<img
src="https://laratech.jp/static/a2e620a783f34f2fabd418d31c4b849e/8162c/banner.png"
/>
</v-col>
</v-row>
デバイスの横幅に合わせて調節する
<v-col v-for="post in posts" lg="4" sm="6" cols="12" :key="`post${post.id}`">
<div>{{ post.title }}</div>
<div>{{ post.content }}</div>
<img
src="https://laratech.jp/static/a2e620a783f34f2fabd418d31c4b849e/8162c/banner.png"
/>
</v-col>今回だと、小さいデバイスだと１つ表示し、徐々に２つ、３つと並べる数が増えます。
引用：https://vuetifyjs.com/ja/components/grids/
使えるタグはこちらの表に書いてある通りですが、andUp 方式のため、一番小さいデバイスをcolsで指定し、それを基準に
sm
md
lg
xl
xxlの順で調節すると良いと思います。
よくある画像とテキストが左右交互になる配置
<v-row>
<v-col cols="8">
<img
src="https://laratech.jp/static/a2e620a783f34f2fabd418d31c4b849e/8162c/banner.png"
/>
</v-col>
<v-col cols="4">
<div>この写真はボロボロのロードバイクです</div>
</v-col>
<v-col cols="4">
<div>昔はかっこよかったんだけど</div>
</v-col>
<v-col cols="8">
<img
src="https://laratech.jp/static/a2e620a783f34f2fabd418d31c4b849e/8162c/banner.png"
/>
</v-col>
</v-row>
グリッドを使えばこういった配置にするのも簡単です。
２重に使うことも可能
<v-row>
<v-col cols="8">
<img
src="https://laratech.jp/static/a2e620a783f34f2fabd418d31c4b849e/8162c/banner.png"
/>
<v-row class="mt-2">
<v-col cols="6">
<img
src="https://laratech.jp/static/a2e620a783f34f2fabd418d31c4b849e/8162c/banner.png"
/>
</v-col>
<v-col cols="6">
<img
src="https://laratech.jp/static/a2e620a783f34f2fabd418d31c4b849e/8162c/banner.png"
/>
</v-col>
</v-row>
</v-col>
<v-col cols="4">
<div>この写真はボロボロのロードバイクです</div>
</v-col>
<v-col cols="4">
<div>昔はかっこよかったんだけど</div>
</v-col>
<v-col cols="8">
<img
src="https://laratech.jp/static/a2e620a783f34f2fabd418d31c4b849e/8162c/banner.png"
/>
<v-row class="mt-2">
<v-col cols="6">
<img
src="https://laratech.jp/static/a2e620a783f34f2fabd418d31c4b849e/8162c/banner.png"
/>
</v-col>
<v-col cols="6">
<img
src="https://laratech.jp/static/a2e620a783f34f2fabd418d31c4b849e/8162c/banner.png"
/>
</v-col>
</v-row>
</v-col>
</v-row>
CSS を理解していれば当然できるに決まっているんですが、たまに見かける写真の配置をグリッドを使ってやってみました。
注意点
<v-row>の直下に<v-col>を使う必要があります。
このグリッ ドシステムは、display: flex;をベースとした割合で仕組み作りがされているからです。
ダメな例
<v-row>
<div>
<v-col cols="8">
<img
src="https://laratech.jp/static/a2e620a783f34f2fabd418d31c4b849e/8162c/banner.png"
/>
</v-col>
<v-col cols="4">
<div>この写真はボロボロのロードバイクです</div>
</v-col>
<v-col cols="4">
<div>昔はかっこよかったんだけど</div>
</v-col>
<v-col cols="8">
<img
src="https://laratech.jp/static/a2e620a783f34f2fabd418d31c4b849e/8162c/banner.png"
/>
</v-col>
</div>
</v-row><v-row>の直下に<div>タグがあれば当然うまくいきません。
必ず、<v-row>の直下には<v-col>を使いましょう。
おわりに
このグリッドシステムは CSS でいうところの、
display: flex;
flex-wrap: wrap;をベースに、子要素がwidth: 100%;を越せば次の行になるというだけです。
cols="1"は大体、100%を 12 等分した
100 / 12 % ≒ 8.33333333333%max-width: 8.33333333333%;が当たっています。
なので、余白調整したいときに、<v-col>に対して margin を与えるとうまく動かないはずです。
余白を調整したい場合は、padding を使いましょう。
以上、参考になれば幸いです。
