Vuetifyは、 flex-boxを使用する12ポイントのグリッドシステムを備えています。グリッドシステムを用いる事で、アプリケーションコンテント内で特定のレイアウトを再現できます。グリッドシステムは xs, sm, md, lg,xl5種類にスクリーンサイズ（解像度詳細は下記表を参照ください）を分類し利用することができます。また解像度をカスタマイズすることも可能です。Breakpoint service.
1.xグリッドシステムは、2.xグリッドシステムを支持して廃止されました。 1.xグリッドのドキュメントはv1.5 docsにあります。
| Device | Code | Types | Range |
|---|---|---|---|
| Extra small | xs | small to large handset | < 600px |
| Small | sm | small to medium tablet | 600px > < 960px |
| Medium | md | large tablet to laptop | 960px > < 1264px* |
| Large | lg | desktop | 1264px* > < 1904px* |
| Extra large | xl | 4k and ultra-wides | > 1904px* |
| * -16px on Desktop | |||
Vuetifyのグリッドシステムは Bootstrap gridから多くの影響を受けています。グリッドシステムは、containers、row、columnを統合し用いて、コンテンツの配置、調整を行います。もしflexboxをご存じでない場合は、背景知識、専門用語、ガイドライン、コード例を次のURLから参照ください。(https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background)
上記の例では、小、中、大、特大のデバイスに３つの同幅のカラムを作成しました。親の「v-container」は、内側の複数の「v-col」を中央に配置します。
- 「v-container」は、サイトのコンテンツを中央および水平方向にパディングする機能を提供します。また、fluidプロパティを使用して、すべてのviewportとデバイスサイズにわたってコンテナを完全に拡張することもできます。ヘルパークラス(
ma-#/pa-#/fill-heightなど)を簡単に適用するために、プロパティがv-containerのクラスとして渡される以前の1.x機能は維持されます。 - 「v-row」は「v-col」のラッパーコンポーネントです。flexプロパティを使用して、内部のカラムのレイアウトとフローを制御します。24pxの標準的な隙間が使用されます。これはdenseプロパティで減らすか、no-guttersで完全に削除できます。これは、1.xの
v-layoutが2.xで置き換えられたものです。 - 「v-col」は「v-row」の直接の子要素でなければならないコンテンツホルダーです。これは、1.xの
v-flexが2.xで置き換えられたものです。
特定のHTML要素をフレックスコンテナとして利用できないなどの制限とフレックスボックスに関するバグを必ず理解してください。
IE11でグリッドシステムを使用する場合、「min-height」では不十分であり、望ましくない結果が生じるため、明示的な「height」を設定する必要があります。
以下に、簡単な例から複雑な例まで示します。
カラムは自動的に親コンテナ内で同じ量のスペースを占有します。これは cols propを使用して変更することができます。また、sm, md, lg, xl propを使用して、ビューポートのサイズが異なる場合のカラムのサイズを定義することもできます。
同じ幅のカラムを複数行に分割することができます。古いブラウザのバージョンでは回避策はあるものの、Safari flexboxのバグ がありました。これは最新版であれば必要ないはずです。
自動レイアウトを使用する場合、1つの列の幅のみを定義でき、その前後に自動的にサイズを変更する兄弟要素が含まれます。
カラムのブレークポイント幅の割り当ては、コンテンツの幅に基づいてサイズ変更するように設定できます。
By default, flex components will automatically fill the available space in a row or column. They will also shrink relative to the rest of the flex items in the flex container when a specific size is not designated. You can define the column width of the v-col by using the cols prop and providing a value from 1 to 12.
Dynamically change your layout based upon resolution. (resize your screen and watch the top row layout change on sm, md, and lg breakpoints)
Vuetifyグリッドシステムのパワーと柔軟性により、素晴らしいユーザーインターフェースを作成できます。
Change the vertical alignment of flex items and their parents using the align and align-self properties.
Change the horizontal alignment of flex items using the justify property.
no-gutters プロパティを使用して、直接のv-colの子からv-rowとパディングから負のマージンを削除することができます。
When more than 12 columns are placed within a given row (that is not using the .flex-nowrap utility class), each group of extra columns will wrap onto a new line.
グリッドの順序を制御できます。 Offsetと同様に、サイズごとに異なる順序を設定できます。あらゆるアプリケーションに対応できるレイアウトを設計します。
You can also designate explicitly first or last which will assign -1 or 13 values respectively to the order CSS property.
Offsetは、まだ表示されていない可能性のある要素を補正したり、コンテンツの位置を制御したりするのに役立ちます。 ブレークポイントと同様に、利用可能なサイズにオフセットを設定できます。 これにより、アプリケーションのレイアウトを必要に合わせて微調整できます。
Offset can also be applied on a per breakpoint basis.
Using the auto margin helper utilities you can force sibling columns away from each other.
非常にカスタマイズされたレイアウトを実現するために、他のフレームワークと同様にグリッドをネストすることができます。
v-spacerコンポーネントは利用可能なスペースを埋めるときや2つのコンポーネントの間にスペースを作りたいときに便利です。