Grid
Vuetify.js uses a 12 point grid system. The grid is used to layout an application's content and contains 5 types of media breakpoints. The 5 ranges of breakpoints are used for targeting specific screen sizes or orientations.

Material Design Viewport Breakpoints
DeviceTypesRange
phone_iphoneExtra smallsmall to large handset< 600px
tabletSmallsmall to medium tablet600px > < 1024px
laptopMediumlarge tablet to laptop1024px > < 1440px
desktop_windowsLargedesktop1440px > < 1920px
tvExtra large4k and ultra-wides> 1920px

Examples

#1 Grid
edit
The v-container can be used for a center focused page, or given the fluid prop to extend its full width. v-layout is used for separating sections and contains the v-flex. The structure of your layout will be as follows, v-layout » v-flex.

#2 Offset
edit
Offsets are useful for compensating for elements that may not be visible yet, or to control the position of content. Just as with breakpoints, you can set an offset for any available sizes.

#3 Order
edit
You can control the ordering of grid items. As with offsets, you can set different orders for different sizes

#4 Direction and Align
edit
Designate the direction and alignment in a variety of ways.

#5 Row and column based on breakpoint
edit
Dynamically change your layout based upon resolution. (resize your screen and watch the layout change on small breakpoints)

API

chevron_leftchevron_right