Edited at

Vuetifyのグリッドシステムの属性について


はじめに

仕事でVuetifyを使うことになったが、グリッドシステムの属性の部分の説明がない箇所が多く、正直よく分からない。

https://vuetifyjs.com/ja/layout/grid

CSSのFlexboxの考えに沿って作られているようなので事前知識があれば特に困ることもないという考え方なのだろうが、生憎こちらはフロントエンドに特に詳しくもないチンパンジーなので、属性名を見ただけではイメージし辛い。

しょうがないので実際に動かしつつ内容を確認した。


2018/07追記

いつからかは分かりませんが、英語のほうのドキュメントに簡単な説明が追加されていました。

また、いくつかの属性についてはExamplesを使って実際に動かしながら挙動を見られるようになったようです。

英語の分かる方は公式のほうを参考にして、この記事はおまけくらいに考えてください。

英語の分からない方は分かるようになってください。


確認のため作成したコード

https://nulltemp.github.io/vuetify-test/

https://github.com/nulltemp/vuetify-test


各属性について


align



align-baseline, align-start, align-center, align-endの4つがあり、各要素の位置の基準をどこに置くかが変わる。



See the Pen

vuetify align
by nulltemp (@nulltemp)

on CodePen.



align-content



align-content-center, align-content-start, align-content-end, align-content-space-around, align-content-space-betweenの5つがあり、各要素が複数行に分かれたときの配置を決定する。

後述のwrap属性を付けた際の挙動に関係する。



See the Pen

vuetify align-content
by nulltemp (@nulltemp)

on CodePen.



d-{type}



d-inline-flex, d-flex, d-inline-block, d-block, d-inlineの5つがあり(上記ではd-blockd-inlineは省略しているが)、要素をinlineとするかblockとするか等を決定する。

公式のDisplay にも少し説明がある。



See the Pen

vuetify dtype
by nulltemp (@nulltemp)

on CodePen.



fluid



要素の最大幅に絡む設定。



See the Pen

vuetify fluid
by nulltemp (@nulltemp)

on CodePen.



grid-list-{xs through xl}



各要素のpaddingに絡む設定。grid-list-xs, grid-list-sm, grid-list-md, grid-list-lg, grid-list-xlの5つある。

公式のGrid listにも説明がある。



See the Pen

vuetify gridlist
by nulltemp (@nulltemp)

on CodePen.



justify



各要素の配置に絡む設定。justify-start, justify-center, justify-end, justify-space-around, justify-space-betweenの5つがある。



See the Pen

vuetify justify
by nulltemp (@nulltemp)

on CodePen.



row, column, reverse



各要素の並べ方についての属性。基本的にはrowで左から右に並べられるが、columnを指定することで上から下に並べられる。また、併せてreverseを指定すれば右から左へ、下から上へといったこともできる。



See the Pen

vuetify rowcolumn
by nulltemp (@nulltemp)

on CodePen.



wrap



上記red, blue, yellowにはxs5を指定しているためVuetifyのグリッドシステムにおける最大値の12ポイントを上回っているが、wrapをつけなかった場合は1行に収まるように幅が修正される。wrapをつけた場合は適宜改行が行われる。



See the Pen

vuetify wrap
by nulltemp (@nulltemp)

on CodePen.



その他

(size)(1-12)offset-(size)(1-12)等については一応公式にも説明があるので読めば大体わかるはず。多分。

fill-heighttagについてはまだよく分からなかったので、時間があれば調査したい。