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

はじめに

以前Vuetifyのグリッドシステムがよく分からなかったので調査した記事を作成したが、Vuetifyのメジャーバージョンアップ（1.5→2.x）により内容が古くなってしまった。
バージョンアップ自体は結構前でもう古いバージョンのVuetifyは使われなさそうだし、色々属性名も変わったりしたようなので、調査のために再度まとめた。

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

https://nulltemp.github.io/vuetify2-test/
https://github.com/nulltemp/vuetify2-test

基本的な変更点

https://vuetifyjs.com/ja/components/grids
v-containerはそのままだが、v-layoutがv-rowに、v-flexがv-colに変わっている。

各属性について

v-containerの属性

fluid

See the Pen qBdZRRm by nulltemp (@nulltemp) on CodePen.

要素の最大幅に絡む設定。元の説明だとビューポートの最大幅を削除するとか書いてある。倍率変えたりCodePenのリンク直接見たりすると効果が分かる。
実はいまだに使い道をよく分かっていない。

v-rowの属性

align

See the Pen vuetify2 align by nulltemp (@nulltemp) on CodePen.

`start`, `center`, `end`, `baseline`, `stretch`の5つがあり、各要素の位置の基準をどこに置くかが変わる。`stretch`は2系で新しく追加されたもので、高さがなんか引き延ばされる。 詳細は[この辺り](https://developer.mozilla.org/ja/docs/Web/CSS/align-items)を参照。 また、`align-`という属性もあり、画面サイズによって`align`の値を変化させることが出来る。一番下は一見`align="center"`だが、`align-xl="stretch"`を指定しているため、大画面で見ると`stretch`を指定したときと同じ振る舞いになる。

align-content

See the Pen vuetify2 align-content by nulltemp (@nulltemp) on CodePen.

`start`, `center`, `end`, `space-between`, `space-around`, `stretch`の6つがあり、各要素が複数行に分かれたときの配置を決定する。`stretch`は2系で新しく追加されたもので、高さがなんか引き延ばされる。 詳細は[この辺り](https://developer.mozilla.org/ja/docs/Web/CSS/align-content)を参照。 また、`align-content-`という属性もあり、画面サイズによって`align-content`の値を変化させることが出来る。一番下は一見`align-content="center"`だが、`align-content-xl="stretch"`を指定しているため、大画面で見ると`stretch`を指定したときと同じ振る舞いになる。

dense

See the Pen vuetify2 dense by nulltemp (@nulltemp) on CodePen.

多分1系にはなかった属性。分かり辛いが恐らくpaddingに絡む設定で、`true`にするとpaddingが小さくなる。

justify

See the Pen vuetify2 justify by nulltemp (@nulltemp) on CodePen.

`start`, `center`, `end`, `space-between`, `space-around`の5つがあり、各要素の配置に絡む設定になる。 詳細は[この辺り](https://developer.mozilla.org/ja/docs/Web/CSS/justify-content)を参照。 また、`justify-`という属性もあり、画面サイズによって`justify`の値を変化させることが出来る。一番下は一見`justify="center"`だが、`justify-xl="space-between"`を指定しているため、大画面で見ると`space-between`を指定したときと同じ振る舞いになる。

no-gutters

See the Pen KKpzqzL by nulltemp (@nulltemp) on CodePen.

多分1系にはなかった属性。`dense`と同じくpaddingに絡む設定のようで、こちらは`true`にするとpaddingが0になるらしい。

v-colの属性

align-self

See the Pen vuetify2 align-self by nulltemp (@nulltemp) on CodePen.

`align`の値を上書きする属性。上記は`v-row`の`align`に`start`を指定しているが、最後の`v-col`だけ`align-self="end"`を指定しているため、ほかと振る舞いが異なっている。

cols

See the Pen JjdbOBd by nulltemp (@nulltemp) on CodePen.

1系だと`(size)(1-12)`（`xs2`とか）で指定していた各グリッドのサイズだが、2系だと`cols="5"`等のやり方で指定するようになった。また、値には`auto`という値が指定できるようになり、どうも内部の値によって幅が可変になるらしい。 例として以前の`xs12`は今回だと`cols="12"`になり、その他`sm12`や`xl12`はそれぞれ`sm="12"`や`xl="12"`になる。

offset

See the Pen vuetify2 offset by nulltemp (@nulltemp) on CodePen.

各グリッド間のオフセットを指定することが出来る。 また、`offset-`という属性もあり、画面サイズによって`offset`の値を変化させることが出来る。一番下は一見`offset="1"`だが、`offset-xl="5"`を指定しているため、大画面で見ると`offset="5"`を指定したときと同じ振る舞いになる。

order

See the Pen vuetify2 order by nulltemp (@nulltemp) on CodePen.

各グリッドの並び順を指定できる。詳細は[この辺り](https://developer.mozilla.org/en-US/docs/Web/CSS/order)を参照。 値は-1~12および`first`, `last`が使えるらしいが、-1だけちょっとうまくいかなかった。 また、`order-`という属性もあり、画面サイズによって`order`の値を変化させることが出来る。一番下の緑のグリッドは一見`order="1"`だが、`order-xl="last"`を指定しているため、大画面で見ると`order="last"`を指定したときと同じ振る舞いになる。

その他

1系では要素をinlineにするかどうか等を指定するd-{type}や要素の改行？に関するwrap、要素の並び方を指定するcolumn等の属性があったが、これらはクラスとして指定する形になったらしい（未確認）。
https://vuetifyjs.com/ja/styles/flex/

また、各要素間のpaddingを指定するgrid-list-{xs through xl}という属性があったが、こちらは{property}{direction}-{size}という形式の新しい属性で対応するようになったらしい新しい属性かと思ったら前からあったやつだった。ただ完全に同一の属性が存在するかどうか分からなかったので、やはりこの属性で対応することになりそう（未確認）。細かい説明は以下に書いてある。
https://vuetifyjs.com/ja/styles/spacing/