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

### 2020/02追記
ここの記事はVuetify1系のグリッドシステムについての属性であり、2020/02時点でのVuetifyの最新は2系です。
色々属性名等が変わって参考にならない部分が増えたはずなのでご注意ください。
一応2系のグリッドシステムについては以下にまとめなおしました。
https://qiita.com/nulltemp/items/cb93565ac81a78b04097

# はじめに
仕事でVuetifyを使うことになったが、グリッドシステムの属性の部分の説明がない箇所が多く、正直よく分からない。
https://v15.vuetifyjs.com/ja/framework/grid
CSSのFlexboxの考えに沿って作られているようなので事前知識があれば特に困ることもないという考え方なのだろうが、生憎こちらはフロントエンドに特に詳しくもないチンパンジーなので、属性名を見ただけではイメージし辛い。
しょうがないので実際に動かしつつ内容を確認した。

### 2018/07追記
いつからかは分かりませんが、[英語のほうのドキュメント](https://v15.vuetifyjs.com/ja/framework/grid#api)に簡単な説明が追加されていました。
また、いくつかの属性については[Examples](https://v15.vuetifyjs.com/ja/framework/grid#examples)を使って実際に動かしながら挙動を見られるようになったようです。
英語の分かる方は公式のほうを参考にして、この記事はおまけくらいに考えてください。
英語の分からない方は分かるようになってください。

# 確認のため作成したコード
https://nulltemp.github.io/vuetify-test/
https://github.com/nulltemp/vuetify-test


# 各属性について
## align
![image.png](https://qiita-image-store.s3.amazonaws.com/0/63657/d795190d-49b4-8a81-b5b4-aea8a73be6a0.png)
`align-baseline`, `align-start`, `align-center`, `align-end`の4つがあり、各要素の位置の基準をどこに置くかが変わる。
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="nulltemp" data-slug-hash="bGbeKWw" 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="vuetify align">
  <span>See the Pen <a href="https://codepen.io/nulltemp/pen/bGbeKWw/">
  vuetify 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>

## align-content
![image.png](https://qiita-image-store.s3.amazonaws.com/0/63657/279591b1-df12-de8f-d9d0-de82ccba0110.png)
`align-content-center`, `align-content-start`, `align-content-end`, `align-content-space-around`, `align-content-space-between`の5つがあり、各要素が複数行に分かれたときの配置を決定する。
後述の`wrap`属性を付けた際の挙動に関係する。
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="nulltemp" data-slug-hash="NWKrLgZ" 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="vuetify align-content">
  <span>See the Pen <a href="https://codepen.io/nulltemp/pen/NWKrLgZ/">
  vuetify 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>

## d-{type}
![image.png](https://qiita-image-store.s3.amazonaws.com/0/63657/5b36813f-7375-6cbc-7d29-82ea4d64b53c.png)
`d-inline-flex`, `d-flex`, `d-inline-block`, `d-block`, `d-inline`の5つがあり（上記では`d-block`と`d-inline`は省略しているが）、要素をinlineとするかblockとするか等を決定する。
公式の[Display](https://v15.vuetifyjs.com/ja/framework/display) にも少し説明がある。
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="nulltemp" data-slug-hash="OJLXojd" 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="vuetify dtype">
  <span>See the Pen <a href="https://codepen.io/nulltemp/pen/OJLXojd/">
  vuetify dtype</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>

## fluid
![image.png](https://qiita-image-store.s3.amazonaws.com/0/63657/810fbaa4-84a3-9136-1bf8-6d5b00624351.png)
要素の最大幅に絡む設定。
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="nulltemp" data-slug-hash="dybXqVm" 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="vuetify fluid">
  <span>See the Pen <a href="https://codepen.io/nulltemp/pen/dybXqVm/">
  vuetify fluid</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>

## grid-list-{xs through xl}
![image.png](https://qiita-image-store.s3.amazonaws.com/0/63657/418e653e-9201-72dd-d610-f8c10e8c4c71.png)
各要素のpaddingに絡む設定。`grid-list-xs`, `grid-list-sm`, `grid-list-md`, `grid-list-lg`, `grid-list-xl`の5つある。
公式の[Grid list](https://v15.vuetifyjs.com/ja/framework/grid-lists)にも説明がある。
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="nulltemp" data-slug-hash="qBWNMVV" 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="vuetify gridlist">
  <span>See the Pen <a href="https://codepen.io/nulltemp/pen/qBWNMVV/">
  vuetify gridlist</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>

## justify
![image.png](https://qiita-image-store.s3.amazonaws.com/0/63657/b33eea0e-eccb-00db-758c-bb7408fe5ffa.png)
各要素の配置に絡む設定。`justify-start`, `justify-center`, `justify-end`, `justify-space-around`, `justify-space-between`の5つがある。
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="nulltemp" data-slug-hash="QWLEVaW" 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="vuetify justify">
  <span>See the Pen <a href="https://codepen.io/nulltemp/pen/QWLEVaW/">
  vuetify 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>

## row, column, reverse
![image.png](https://qiita-image-store.s3.amazonaws.com/0/63657/f3645e1e-1672-3ea0-f30d-fc4911bd782d.png)
各要素の並べ方についての属性。基本的には`row`で左から右に並べられるが、`column`を指定することで上から下に並べられる。また、併せて`reverse`を指定すれば右から左へ、下から上へといったこともできる。
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="nulltemp" data-slug-hash="PoYzdEV" 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="vuetify rowcolumn">
  <span>See the Pen <a href="https://codepen.io/nulltemp/pen/PoYzdEV/">
  vuetify rowcolumn</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>

## wrap
![image.png](https://qiita-image-store.s3.amazonaws.com/0/63657/418da7ac-2a45-34b9-8203-c0690767ca0f.png)
上記red, blue, yellowには`xs5`を指定しているためVuetifyのグリッドシステムにおける最大値の12ポイントを上回っているが、`wrap`をつけなかった場合は1行に収まるように幅が修正される。`wrap`をつけた場合は適宜改行が行われる。
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="nulltemp" data-slug-hash="yLBJxve" 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="vuetify wrap">
  <span>See the Pen <a href="https://codepen.io/nulltemp/pen/yLBJxve/">
  vuetify wrap</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>

## その他
`(size)(1-12)`や`offset-(size)(1-12)`等については一応公式にも説明があるので読めば大体わかるはず。多分。
`fill-height`や`tag`についてはまだよく分からなかったので、時間があれば調査したい。