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.
1.x grid system has been deprecated in favor of the 2.x grid system. Documentation for 1.x grids can be found in the v1.5 docs
| Device | Code | Types | Range |
|---|---|---|---|
| Extra small | xs | small to large handset | < 600px |
| Small | sm | small to medium tablet | 600px > < 960px |
| Medium | md | large tablet to laptop | 960px > < 1264px* |
| Large | lg | desktop | 1264px* > < 1904px* |
| Extra large | xl | 4k and ultra-wides | > 1904px* |
| * -16px on Desktop | |||
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-containerprovides 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. Maintains previous 1.x functionality in which props are passed through as classes onv-containerallowing for the application of helper classes (such asma-#/pa-#/fill-height) to easily be appliedv-rowis a wrapper component forv-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. This is the 2.x replacement forv-layoutin 1.x.v-colis a content holder that must be a direct child ofv-row. This is the 2.x replacement forv-flexin 1.x.
Ensure that you understand the limitations and bugs around flexbox, such as the inability to utilize certain HTML elements as flex containers.
When using the grid system with IE11 you will need to set an explicit height as min-height will not suffice and cause undesired results.
Select your desired component from below and see the available props, slots, events and functions.
Below is a collection of simple to complex examples.
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.
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.
When using the auto-layout, you can define the width of only one column and still have its siblings to automatically resize around it.
Assigning breakpoint width for columns can be configured to resize based upon the nature width of their content.
By default, flex components will automatically fill the available space in a row or column. They will also shrink relative to the rest of the flex items in the flex container when a specific size is not designated. You can define the column width of the v-col by using the cols prop and providing a value from 1 to 12.
Dynamically change your layout based upon resolution. (resize your screen and watch the top row layout change on sm, md, and lg breakpoints)
The power and flexibility of the Vuetify grid system allows you to create amazing user interfaces.
Change the vertical alignment of flex items and their parents using the align and align-self properties.
Change the horizontal alignment of flex items using the justify property.
You can remove the negative margins from v-row and the padding from its direct v-col children using the no-gutters property.
When more than 12 columns are placed within a given row (that is not using the .flex-nowrap utility class), each group of extra columns will wrap onto a new line.
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.
You can also designate explicitly first or last which will assign -1 or 13 values respectively to the order CSS property.
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.
Offset can also be applied on a per breakpoint basis.
Using the auto margin helper utilities you can force sibling columns away from each other.
Grids can be nested, similar to other frameworks, in order to achieve very custom layouts.
The v-spacer component is useful when you want to fill available space or make space between two components.