Grid system

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.

Usage

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.
For convenience reasons, these components automatically transform attributes into classes. Allowing you to write <v-layout pa-3 mb-2></v-layout> instead of <v-layout class="pa-3 mb-2"></v-layout>. The only exception are data attributes which are left as-is.

API

v-container
Name
align-baseline
Default
false
Type
Boolean

Align items to the baseline.

Name
align-center
Default
false
Type
Boolean

Align items to the center.

Name
align-content-center
Default
false
Type
Boolean

Align content to the center.

Name
align-content-end
Default
false
Type
Boolean

Align content to the end.

Name
align-content-space-around
Default
false
Type
Boolean

Align content to the space around.

Name
align-content-space-between
Default
false
Type
Boolean

Align content to the space between.

Name
align-content-start
Default
false
Type
Boolean

Align content to the start.

Name
align-end
Default
false
Type
Boolean

Align items to the end.

Name
align-start
Default
false
Type
Boolean

Align items to the start.

Name
d-{type}
Default
false
Type
Boolean

Specify to display an element as flex/inline-flex/block etc. Syntax is d-{type}. For example d-flex.

Name
fill-height
Default
false
Type
Boolean

Make sure that col element height is filled with parent and child. Important for Safari/Firefox if children is column element.

Name
fluid
Default
false
Type
Boolean

Removes viewport size breakpoints

Name
grid-list-{xs through xl}
Default
false
Type
Boolean

Sets the gutter between grid list items ranging from 2px to 24px

Name
id
Default
undefined
Type
string

Sets the DOM id on the component

Name
justify-center
Default
false
Type
Boolean

Justify content to the center.

Name
justify-end
Default
false
Type
Boolean

Justify content to the end.

Name
justify-space-around
Default
false
Type
Boolean

Justify content to the space around.

Name
justify-space-between
Default
false
Type
Boolean

Justify content to the space between.

Name
justify-start
Default
false
Type
Boolean

Justify content to the start.

Name
tag
Default
div
Type
String

Specify a custom tag to use on the component

Examples

Layout playground

Test the layout props in a simple playground.

Offset

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.

Order

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.

Direction and Align

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

Row and column breakpoints

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

Grow and Shrink

Flex components can utilize the grow and shrink props to automatically fill available space in a row or shrink to only use the space needed for its contents.

Nested grid

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

Unique layouts

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

v-spacer

The v-spacer component is useful when you want to fill available space or make space between two components.

Html tags

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

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore