Vuetifyでわかんなくて調べたことを出来るだけ平易な言葉でメモっていきます。
また、出来るだけカタカナ語はこの記事の中で完結するようにします。
間違っていたらお教えください。
前置き
Vuetifyとは
vue.jsでマテリアルデザインを実現するためのUIフレームワークです！
↓Vuetify公式
https://vuetifyjs.com/ja/
https://github.com/vuetifyjs/vuetify
マテリアルデザイン
Googleさんが言い出した、「ユーザーさんにとってわかりやすくて操作しやすいページの作り方」です！
「ポップアップみたいに画面の上の方にウインドウが出てきたら影をつけようね！」とか、
「ボタンとボタンの間はこれぐらい間隔をあけてね！」とかめちゃめちゃ事細かに決めてあります。
そんな複雑なCSS書いてられるか！って人のためにVuetifyが簡単に実現してくれます！
↓Googleさんのマテリアルデザイン指南
https://material.io/
グリッドシステム
スイスのデザイナーさんが1981年に考えた、デザインの手法だよ！
マテリアルデザインには必要不可欠な概念で、最初は、紙ベースの表現で用いられていたけど、最近になってWebデザインに流用されてきたよ！
グリッド＝格子 つまり格子状に切ったブロックそれぞれに情報を配置していくことで、
規則性が生まれたり、情報の関係性を視覚的に捉えたりできて、見る人にとって、欲しい情報がわかりやすく表現できるよ！
ブレークポイント
vuetifyのグリッドシステムでは、フレックスボックスと言われる、「CSSにdisplay:flexが指定された要素」の横幅を１２分割して、そのうちのグリッド何個分って指定をするんだけど、
「画面サイズや表示するデバイスによって、グリッド何個分を変えたい！」って思った時の「画面サイズの境界線」だよ！
詳しくは、下記の公式ガイドラインの表を見てみてね！
https://vuetifyjs.com/ja/customization/breakpoints#breakpoints
グリッドシステムを作るためのタグ
v-app
Vuetifyは、このタグの中で使ってね！このタグの中じゃないと正常に動作しないよ！
v-container
レイアウトをいじる範囲を示すコンテナだよ！
paddingがついてるから、真ん中に寄ったレイアウトになるね！
子要素にpadding効かせたいときはgrid-listを指定するよ！
特徴：
・width: 100%;だが、max-widthはブレークポイントに従って段階的に設定されている
・max-widthを常に親要素に合わせたい場合は、タグのプロパティにfluidを指定する
・margin-right: auto; margin-left: auto;により子要素が左右中央寄せとなる
・上下中央寄せにするには、fill-heightプロパティをタグに指定する
・設定で変更できるが、paddingが初期値12pxと設定されている
v-layout
まとまりをあらわして、子要素の並び方を制御するよ！
デフォルトでは、CSSのdisplay: flex;が効いてて、直下の要素が横並びになるよ！
縦並びにしたいときは、columnプロパティを入れようね！
グリッドシステムを効かせたいときはwrapプロパティを入れようね！横幅がいっぱい（グリッド１２個分超え）になったら改行してくれるよ！
特徴：
・display: flex;が指定されている
・タグの要素にcolumnを指定すると縦並びになり、reverseを指定すると並び順を逆にできる。併用も可能
・デフォルトでは、flex-wrap: nowrap;が指定してあり、横幅いっぱいになっても改行されずに続いていくが、
wrapプロパティを指定すると、flex-wrap: wrap;となり、横幅に応じて、自動で改行される。
v-flex
横幅の指定を行うよ！オフセットっていう、要素の左側にmarginをいれたりできるよ！
CSSのflex: 1 1 autoを自動的に入れてくれるよ！
参考:http://www.htmq.com/css/flex.shtml
グリッドシステムで位置の指定を行う対象だよ！
<!-- 左側に横幅1/12の空白、5/12の範囲にテキストエリアがあって、残りの右側6/12は空白 -->
<v-flex offset-xs1 xs5>
<textarea />
</v-flex>
特徴
・デフォルトではmax-width: 100%が設定されているが、例のxs5などのブレークポイントとサイズの指定があった場合は、max-widthとflex-basisがそれに応じて設定され、flex-grow: 0が指定されて横に伸びなくなる
・例のようにoffset-xs1などのoffset-[ブレークポイント][サイズ]の指定があった場合は、指定に応じた値がmargin-leftに設定される
以上
一応、vuetifyのソースを見ながら書いたのですが、何か間違いなどがありましたらご指摘いただきたいです！
よろしくお願いいたします。