# Grid system

Vuetifyは、 flex-boxを使用する12ポイントのグリッドシステムを備えています。 グリッドを使用すると、アプリケーションのコンテンツにかっちりとしたレイアウトを持たせることができます。 特定の画面サイズや向きに対応するため、xssmmdlgxlの5種類のメディアブレークポイントが用意されています。 これらのブレークポイントは、Viewport Breakpoints テーブルで以下のように定義されています。ブレークポイントサービスを編集してカスタマイズすることもできます。

Material Designブレークポイント
デバイスコード種類解像度の範囲
Extra smallxs小型から大型のスマホ< 600px
Smallsm小型から中型のタブレット600px > < 960px
Mediummd大型タブレットからノートパソコン960px > < 1264px*
Largelgデスクトップ1264px > < 1904px*
Extra largexl4k、ウルトラワイド> 1904px*
デスクトップにおけるブラウザスクロールバーの * -16px
仕様

# 使い方

Vuetifyのグリッドシステムは、 Bootstrap gridから大きく影響を受けています。 グリッドシステムでは、container、row、columnを使ってコンテンツの配置や調整を行います。 flexbox をご存知でない場合は、CSS Tricks flexbox guide で経緯、用語、ガイドライン、およびコードサンプルを参照してください。

# API

# サブコンポーネント

# v-container

v-container は、サイトのコンテンツ間にパディングを入れ、コンテンツを中央に配置する機能を提供します。 また、すべてのビューポートやデバイスサイズで動作するように、fluid prop を使って総合的にコンテナを拡張することもできます。 旧 1.x バージョンの機能を引き継ぎ、v-container には props をクラスとして渡せるようになっています。これにより、ヘルパークラスのアプリケーション (ma-#/pa-#/fill-height など) にも簡単に適用できます。

# v-col

v-colはコンテンツを保持する要素で、v-row の直接の子要素である必要があります。 これは 1.x の v-flex に置き換わる、2.x の要素です。

# v-row

v-row は、v-col のラッパーコンポーネントです。 flex プロパティを使用して、内部の列のレイアウトとフローを制御します。 24px が標準の gutter となっています。 これは dense prop で縮小することや、no-gutters で完全に取り除くことができます。 これは、1.x の v-layout に置き換わる、2.x の要素です。

# v-spacer

v-spacer は、親子コンポーネント間で残りの幅を分配します。基本的でありながら汎用性の高い、間隔調整用のコンポーネントです。 子コンポーネントの前または後に単一の v-spacer を配置すると、子コンポーネントはコンテナの左または右に寄せられます。 複数のコンポーネント間に複数の v-spacer を使用すると、残りの幅が各 v-spacer 間で均等に分配されます。

# 注意事項

# サンプル

# Props

# 配置

alignalign-self prop を使用すると、flex アイテムとその親の縦方向の配置を変更できます。

# ブレークポイントのサイズ

列の幅は、自動的に親コンテナのサイズに合わせて同等の幅になります。 これは cols prop で変更できます。 また、smmdlgxl prop を使用して、ビューポートのサイズによって列の幅を指定することもできます。

# Justify

justify プロパティを使用すると、flex項目の水平方向の配置を変更できます。

# no-gutters

no-gutters prop を使用すると、v-row から負のマージンを削除し、その直接の v-col の子要素からパディングを削除することができます。

# オフセット

オフセットは、まだ表示されていない可能性のある要素を埋め合わせる場合や、コンテンツの位置を指定したい場合に便利です。 ブレークポイントと同様に、オフセットには既定のサイズを指定できます。 これにより、アプリケーションのレイアウトをニーズに合うように細かく調整できます。

# ブレークポイントのオフセット

オフセットは、ブレークポイントごとに適用することもできます。

# 順序

グリッドの各項目の順序を指定することができます。 オフセットと同様に、サイズごとに異なる順序を設定できます。 これにより、あらゆるアプリケーションのニーズに合わせて、独自の画面レイアウトをデザインできます。

# 順序: 最初と最後

明示的に first または last を指定することで、それぞれ order の CSS プロパティの -1 または 13 に対応する値が割り当てられます。

# その他

# 列方向のラッピング

特定の行 (.flex-nowrap ユーティリティクラスが適用されていないもの) に含まれる列の数が 12 を超える場合、溢れる列は新しい行に改行されて表示されます。

# 等幅の列

等幅の列は、複数の行に区切ることができます。 古いバージョンのブラウザーで回避策はあるものの、Safari では flexbox のバグがありました。 最新版を使用する場合、これは必要ではありません。

# 拡大と縮小

デフォルトでは、flex コンポーネントは自動的に行または列の空き領域を埋めます。 また、決まったサイズが指定されていない場合、flex コンテナー内の他のフレックス要素に応じて縮小します。 v-col の列の幅は cols prop を使って指定できます。値には 1 〜 12 を指定します。

# マージンヘルパー

auto margin helper ユーティリティ を使用すると、子同士の列を互いに離すことができます。

# ネストしたグリッド

非常にカスタマイズされたレイアウトを実現するために、他のフレームワークと同様にグリッドをネストすることができます。

# 1列の幅

自動レイアウトを使用する場合、幅を指定する必要のある列は 1つのみです。その前後に、自動的にサイズが変更される兄弟の要素が含まれます。

# 行と列のブレークポイント

レイアウトは解像度に基づいて動的に変更されます。 (上の row のレイアウトが、画面サイズを変えてsm、md、lgのブレークポイントに当たったときにどのように変化するか観察してください)

# スペーサー

v-spacer コンポーネントは、空間を確保したい場合や、2つのコンポーネント間に空間を取りたい場合に便利です。

# ユニークなレイアウト

Vuetifyグリッドシステムのパワーと柔軟性により、素晴らしいユーザーインターフェースを作成できます。

# 変化のあるコンテンツ幅

コンテンツの本来の幅に基づいてサイズ変更が起きるように、列のブレークポイント幅の割り当てを変更できます。

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:09/18/2021, 7:08:41 AM