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.
|phone_iphoneExtra small||xs||small to large handset||< 600px|
|tabletSmall||sm||small to medium tablet||600px > < 960px|
|laptopMedium||md||large tablet to laptop||960px > < 1264*|
|desktop_windowsLarge||lg||desktop||1264 > < 1904px*|
|tvExtra large||xl||4k and ultra-wides||> 1904px*|
|* -16px on Desktop|
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-4 mb-2></v-layout> instead of
<v-layout class="pa-4 mb-2"></v-layout>. The only exception are data attributes which are left as-is.
Test the layout props in a simple playground.
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.
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
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 there isn't enough space in the row or column. To disable the grow behavior, use the
shrink attribute. To disable the shrink behavior, use the
grow attribute. To disable both the grow and shrink behavior, use the
Grids can be nested, similar to other frameworks, in order to achieve very custom layouts.
The power and flexibility of the Vuetify grid system allows you to create amazing user interfaces.
v-spacer component is useful when you want to fill available space or make space between two components.