Vuetify has a 12 point grid system. Built using flex-box, the grid is used to layout an application's content. It contains 5 types of media breakpoints that are used for targeting specific screen sizes or orientations. The props for grid components are actually classes that are derived from their defined properties. This allows you to easily specify these helper classes as props, while still providing the classes to be used anywhere.

Go to api
If you are looking for Grid lists, please navigate here.
Material Design Viewport Breakpoints
phone_iphoneExtra smallxssmall to large handset< 600px
tabletSmallsmsmall to medium tablet600px > < 960px
laptopMediummdlarge tablet to laptop960px > < 1264*
desktop_windowsLargelgdesktop1264 > < 1904px*
tvExtra largexl4k and ultra-wides> 1904px*
* -16px on Desktop


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-container » v-layout » v-flex. Each part of the grid chain is a flex-box element. The final, v-flex, automatically sets its children to have flex: 1 1 auto.

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. This allows you to fine tune your application layout precisely to your needs.

You can control the ordering of grid items. As with offsets, you can set different orders for different sizes. Design specialized screen layouts that accommodate to any application.

Designate the direction and alignment in a variety of ways. All of the available flex-box api is available through intuitive helper props.

Dynamically change your layout based upon resolution. (resize your screen and watch the layout change to a row on small breakpoints)

Grids can be nested, similar to other frameworks, in order to achieve very custom layouts.

The power and flexiblity of the Vuetify grid system allows you to create amazing user interfaces.

Sometimes you will want to specify a layout item as a specific tag, such as a section or li element.

Vuetify breakpoint functionality requires the use of the v-app component.

Breakpoint object

Vuetify converts the available breakpoints into an accessible object from within your application. This will allow you to assign/apply specific properties and attributes based upon viewport size. The object can be accessed from:
export default {
   mounted () {
This object contains the same semantic properties that you are already used to using from the grid system. Let's try a real world example. You have a v-dialog component that you want to convert to a full-screen dialog on mobile devices. Normally you would need to bind watchers for the viewport size, and/or check whenever the page loads.
export default {
   data: () => ({
      isMobile: false
   mounted () {
   beforeDestroy () {
     if (typeof window !== 'undefined') {
        window.removeEventListener('resize', this.onResize, { passive: true })
   methods: {
     init () {
        window.addEventListener('resize', this.onResize, { passive: true })
     onResize () {
        this.isMobile = window.innerWidth < 600
That's a lot of boilerplate to write. Even if you opt to use the built in v-resize directive, you are still going to have to define a resize method. With the breakpoint object you can completely skip this logic and get back to building your application.
<v-dialog :fullscreen="$vuetify.breakpoint.xsOnly">