Vuetify comes with a 12 point grid system built using flex-box. The grid is used to create specific layouts within an application's content. It contains 5 types of media breakpoints that are used for targeting specific screen sizes or orientations, xs, sm, md, lg and xl. These resolutions are defined below in the Viewport Breakpoints table and can be modified by customizing the Breakpoint service.

Material Design Viewport Breakpoints
DeviceCodeTypesRange
Extra smallxssmall to large handset< 600px
Smallsmsmall to medium tablet600px > < 960px
Mediummdlarge tablet to laptop960px > < 1264*
Largelgdesktop1264 > < 1904px*
Extra largexl4k and ultra-wides> 1904px*
* -16px on Desktop

Usage

The Vuetify grid is heavily inspired by the Bootstrap grid. It is integrated by using a series of containers, rows, and columns to layout and align content. If you are new to flexbox, Read the CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.

In the example above, we created three equal-width columns on small, medium, large and extra large devices. The parent v-container to center the inner v-cols.

  • v-container provides the ability to center and horizontally pad your site's contents. You can also use the fluid prop to fully extend the container across all viewport and device sizes.
  • v-row is a wrapper component for v-col. It utilizes flex properties to control the layout and flow of its inner columns. It uses a standard gutter of 24px. This can be reduced with the dense prop or removed completely with no-gutters.
  • v-col is a content holder that must be a direct child of v-row.

Ensure that you understand the limitations and bugs around flexbox, such as the inhability to utilize certain HTML elements as flex containers.

API

Examples

Auto sizing columns

Columns will automatically take up an equal amount of space within their parent container. This can be modified using the cols prop. You can also utilize the sm, md, lg, and xl props to further define how the column will be sized in different viewport sizes.

Equal width columns

You can break equal width columns into multiple lines. While there are workarounds for older browser versions, there was a Safari flexbox bug. This shouldn't be necessary if you're up-to-date.

One column width

When using the auto-layout, you can define the width of only one column and still have its siblings to automatically resize around it.

Variable content width

Assigning breakpoint width for columns can be configured to resize based upon the nature width of their content.

Grow and Shrink

デフォルトでは、フレックスコンポーネントは自動的に行または列の利用可能なスペースを埋めます。 行または列に十分なスペースがない場合は、フレックスコンテナ内の他のフレックスアイテムと比較して縮小されます。 拡大動作を無効にするには、 shrink属性を使います。 縮小動作を無効にするには、 grow属性を使います。 拡大と縮小の両方の動作を無効にするには、 grow-shrink-0属性を使います。

Row and column breakpoints

解像度に基づいてレイアウトを動的に変更します。 (画面のサイズを変更し、小さなブレークポイントでレイアウトが rowに変わるのを見てください)

Unique layouts

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

Vertical alignment

Change the vertical alignment of flex items and their parents using the align and align-self properties.

Horizontal alignment

Change the horizontal alignment of flex items and their parents using the justify and justify-self properties.

No gutters

You can remove the negative margins from v-row and the padding from its direct v-col children using the no-gutters property.

Column wrapping

When more than 12 columns are placed within a given row (that is not using the .flex-no-wrap utility class), each group of extra columns will wrap onto a new line.

Order classes

グリッドの順序を制御できます。 Offsetと同様に、サイズごとに異なる順序を設定できます。あらゆるアプリケーションに対応できるレイアウトを設計します。

Order last / first

You can also designate explicitly first or last which will assign -1 or 13 values respectively to the order CSS property.

オフセット

Offsetは、まだ表示されていない可能性のある要素を補正したり、コンテンツの位置を制御したりするのに役立ちます。 ブレークポイントと同様に、利用可能なサイズにオフセットを設定できます。 これにより、アプリケーションのレイアウトを必要に合わせて微調整できます。

Offset breakpoint

Offset can also be applied on a per breakpoint basis.

Margin utilities

Using the auto margin helper utilities you can force sibling columns away from each other.

Nested grid

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

Spacers

v-spacerコンポーネントは利用可能なスペースを埋めるときや2つのコンポーネントの間にスペースを作りたいときに便利です。

Edit this page | language on Github
Vuetify
StoreFor Enterprise