Grid system
Vuetify comes with a 12 point grid system built using flexbox.
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 breakpoints are defined below in the Viewport Breakpoints table and can be modified by customizing the Breakpoint service.
Usage
The Vuetify grid is heavily inspired by the Bootstrap grid. It is implemented 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.
| Device | Code | Type | Range |
|---|---|---|---|
| Extra small | xs | Small to large phone | < 600px |
| Small | sm | Small to medium tablet | 600px > < 840px |
| Medium | md | Large tablet to laptop | 840px > < 1145px |
| Large | lg | Laptop to desktop | 1145px > < 1545px |
| Extra large | xl | 1080p to 1440p desktop | 1545px > < 2138px |
| Extra extra large | xxl | 4k and ultra-wide | > 2138px |
| Specification | |||
API
| Component | Description |
|---|---|
| v-container | The container component. |
| v-row | Sub-component used to create rows. |
| v-col | Sub-component used to create columns. |
| v-spacer | A component often used in grid scenarios. |
Sub-components
v-container
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. Maintains previous 1.x functionality in which props are passed through as classes on v-container allowing for the application of helper classes (such as ma-#/pa-#/fill-height) to easily be applied.
v-col
v-col is a content holder that must be a direct child of v-row. This is the 2.x replacement for v-flex in 1.x.
v-row
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 modified using the density prop - use comfortable for reduced gutters or compact to remove them completely. This is the 2.x replacement for v-layout in 1.x.
v-spacer
v-spacer is a basic yet versatile spacing component used to distribute remaining width in-between a parents child components. When placing a single v-spacer before or after the child components, the components will push to the right and left of its container. When more than one v-spacer’s are used between multiple components, the remaining width is evenly distributed between each spacer.
Helper Classes
The class fill-height applies height: 100% to an element. When applied to v-container it will also set align-items: center.
Caveats
Breakpoints based props on grid components work in an andUp fashion. With this in mind the xs breakpoint is assumed and has been removed from the props context. This applies to offset and single breakpoint props on v-col
- The xs prop does not exist on
v-col. The equivalent to this is the cols prop
Examples
Props
Size
The size prop on v-row defines the number of columns for the columns placed directly within. The example below sets it to 5 instead of 12.
Align
Change the vertical alignment of flex items and their parents using the align and align-self utility classes.
Breakpoint sizing
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.
Justify
Change the horizontal alignment of flex items using the justify utility classes.
No gutters
You can remove the negative margins from v-row and the padding from its direct v-col children using the density property.
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.
Offset breakpoint
Offset can also be applied on a per breakpoint basis.
Order
You can control the ordering of grid items. As with offsets, you can set different orders for different sizes using the order utility classes. Design specialized screen layouts that accommodate to any application.
Order first and last
You can also designate explicitly first or last using the order-first and order-last utility classes.
Misc
Column wrapping
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.
In the example below, the first and second v-col components are a total of 13 columns wide, which means the second v-col gets wrapped to a new line.
Equal width columns
You can break equal width columns into multiple lines using v-responsive.
Grow and Shrink
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.
Margin helpers
Using the auto margin helper utilities you can force sibling columns away from each other.
Nested grid
Grids can be nested, similar to other frameworks, in order to achieve very custom layouts.
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.
Row and column breakpoints
Dynamically change your layout based upon resolution. Resize your screen and watch the row layout change on sm, md, and lg breakpoints.
Size overrides
The v-col component can override the row’s size using a fraction syntax like cols="2/5". This means the column takes 2 parts of a 5-column grid. You can also use responsive props like md and lg or offset with the same syntax.
grow | offset-md:1/3
grow | offset-lg:0
md:1/3
lg:1/4
md:1/3 | offset-md:1/6
lg:1/2 | offset-lg:0
Spacers
The v-spacer component is useful when you want to fill available space or make space between two components.