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

# はじめに
以前Vuetifyのグリッドシステムがよく分からなかったので[調査した記事](https://qiita.com/nulltemp/items/07c6998a4ad8927a9b54)を作成したが、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
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="result" data-user="nulltemp" data-slug-hash="qBdZRRm" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="qBdZRRm">
  <span>See the Pen <a href="https://codepen.io/nulltemp/pen/qBdZRRm">
  qBdZRRm</a> by nulltemp (<a href="https://codepen.io/nulltemp">@nulltemp</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

## v-rowの属性
### align
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="result" data-user="nulltemp" data-slug-hash="qBdZRjj" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vuetify2 align">
  <span>See the Pen <a href="https://codepen.io/nulltemp/pen/qBdZRjj">
  vuetify2 align</a> by nulltemp (<a href="https://codepen.io/nulltemp">@nulltemp</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
`start`, `center`, `end`, `baseline`, `stretch`の5つがあり、各要素の位置の基準をどこに置くかが変わる。`stretch`は2系で新しく追加されたもので、高さがなんか引き延ばされる。
詳細は[この辺り](https://developer.mozilla.org/ja/docs/Web/CSS/align-items)を参照。
また、`align-<xx>`という属性もあり、画面サイズによって`align`の値を変化させることが出来る。一番下は一見`align="center"`だが、`align-xl="stretch"`を指定しているため、大画面で見ると`stretch`を指定したときと同じ振る舞いになる。

### align-content
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="result" data-user="nulltemp" data-slug-hash="MWwyoWN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vuetify2 align-content">
  <span>See the Pen <a href="https://codepen.io/nulltemp/pen/MWwyoWN">
  vuetify2 align-content</a> by nulltemp (<a href="https://codepen.io/nulltemp">@nulltemp</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
`start`, `center`, `end`, `space-between`, `space-around`, `stretch`の6つがあり、各要素が複数行に分かれたときの配置を決定する。`stretch`は2系で新しく追加されたもので、高さがなんか引き延ばされる。
詳細は[この辺り](https://developer.mozilla.org/ja/docs/Web/CSS/align-content)を参照。
また、`align-content-<xx>`という属性もあり、画面サイズによって`align-content`の値を変化させることが出来る。一番下は一見`align-content="center"`だが、`align-content-xl="stretch"`を指定しているため、大画面で見ると`stretch`を指定したときと同じ振る舞いになる。

### dense
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="result" data-user="nulltemp" data-slug-hash="gOprRpe" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vuetify2 dense">
  <span>See the Pen <a href="https://codepen.io/nulltemp/pen/gOprRpe">
  vuetify2 dense</a> by nulltemp (<a href="https://codepen.io/nulltemp">@nulltemp</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
多分1系にはなかった属性。分かり辛いが恐らくpaddingに絡む設定で、`true`にするとpaddingが小さくなる。

### justify
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="result" data-user="nulltemp" data-slug-hash="mdJPwep" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vuetify2 justify">
  <span>See the Pen <a href="https://codepen.io/nulltemp/pen/mdJPwep">
  vuetify2 justify</a> by nulltemp (<a href="https://codepen.io/nulltemp">@nulltemp</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
`start`, `center`, `end`, `space-between`, `space-around`の5つがあり、各要素の配置に絡む設定になる。
詳細は[この辺り](https://developer.mozilla.org/ja/docs/Web/CSS/justify-content)を参照。
また、`justify-<xx>`という属性もあり、画面サイズによって`justify`の値を変化させることが出来る。一番下は一見`justify="center"`だが、`justify-xl="space-between"`を指定しているため、大画面で見ると`space-between`を指定したときと同じ振る舞いになる。

### no-gutters
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="result" data-user="nulltemp" data-slug-hash="KKpzqzL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="KKpzqzL">
  <span>See the Pen <a href="https://codepen.io/nulltemp/pen/KKpzqzL">
  KKpzqzL</a> by nulltemp (<a href="https://codepen.io/nulltemp">@nulltemp</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
多分1系にはなかった属性。`dense`と同じくpaddingに絡む設定のようで、こちらは`true`にするとpaddingが0になるらしい。

## v-colの属性
### align-self
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="result" data-user="nulltemp" data-slug-hash="dyoOZKX" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vuetify2 align-self">
  <span>See the Pen <a href="https://codepen.io/nulltemp/pen/dyoOZKX">
  vuetify2 align-self</a> by nulltemp (<a href="https://codepen.io/nulltemp">@nulltemp</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
`align`の値を上書きする属性。上記は`v-row`の`align`に`start`を指定しているが、最後の`v-col`だけ`align-self="end"`を指定しているため、ほかと振る舞いが異なっている。

### cols
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="result" data-user="nulltemp" data-slug-hash="JjdbOBd" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="JjdbOBd">
  <span>See the Pen <a href="https://codepen.io/nulltemp/pen/JjdbOBd">
  JjdbOBd</a> by nulltemp (<a href="https://codepen.io/nulltemp">@nulltemp</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
1系だと`(size)(1-12)`（`xs2`とか）で指定していた各グリッドのサイズだが、2系だと`cols="5"`等のやり方で指定するようになった。また、値には`auto`という値が指定できるようになり、どうも内部の値によって幅が可変になるらしい。
例として以前の`xs12`は今回だと`cols="12"`になり、その他`sm12`や`xl12`はそれぞれ`sm="12"`や`xl="12"`になる。

### offset
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="result" data-user="nulltemp" data-slug-hash="qBdqVLb" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vuetify2 offset">
  <span>See the Pen <a href="https://codepen.io/nulltemp/pen/qBdqVLb">
  vuetify2 offset</a> by nulltemp (<a href="https://codepen.io/nulltemp">@nulltemp</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
各グリッド間のオフセットを指定することが出来る。
また、`offset-<xx>`という属性もあり、画面サイズによって`offset`の値を変化させることが出来る。一番下は一見`offset="1"`だが、`offset-xl="5"`を指定しているため、大画面で見ると`offset="5"`を指定したときと同じ振る舞いになる。

### order
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="result" data-user="nulltemp" data-slug-hash="qBdqVvZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vuetify2 order">
  <span>See the Pen <a href="https://codepen.io/nulltemp/pen/qBdqVvZ">
  vuetify2 order</a> by nulltemp (<a href="https://codepen.io/nulltemp">@nulltemp</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
各グリッドの並び順を指定できる。詳細は[この辺り](https://developer.mozilla.org/en-US/docs/Web/CSS/order)を参照。
値は-1~12および`first`, `last`が使えるらしいが、-1だけちょっとうまくいかなかった。
また、`order-<xx>`という属性もあり、画面サイズによって`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://v15.vuetifyjs.com/ja/framework/spacing)だった。ただ完全に同一の属性が存在するかどうか分からなかったので、やはりこの属性で対応することになりそう（未確認）。細かい説明は以下に書いてある。
https://vuetifyjs.com/ja/styles/spacing/