Vuetify is a popular UI component library for VueJs. It is an open-source library and provides a wide range of pre-designed responsive components. It provides a comprehensive set of components for building front-end web applications that include the following:
Layout grids
Vavigation bars
Forms
Buttons
Datatables
In this Answer, we'll learn about the basic grid system of Vuetify.
To create a basic responsive layout using Vuetify's grid system, we'll follow the following steps:
Install Vuetify in our VueJs project using the following command:
npm install vuetify
Import Vuetify and its CSS in your main application file, i.e., main.js
.
import Vue from 'vue';import Vuetify from 'vuetify';import 'vuetify/dist/vuetify.css';Vue.use(Vuetify);new Vue({// Your app configuration}).$mount('#app');
Now, we can use Vuetify in our project, since it is mounted with our all components.
To create a grid system, we first have to learn about the following components of a grid system:
v-container
v-row
v-col
v-container
The v-container
component is part of Vuetify's layout system and serves as a wrapper for content within a page or a section of a page. It helps in creating a responsive and centered container for your content.
v-row
The v-row
component is another part of Vuetify's layout system and is used to create a row within a v-container
or any other container element. It helps in organizing and aligning columns or other content within a horizontal row.
v-col
The v-col
component is a crucial part of Vuetify's layout system and is used to create columns within a v-row
or any other container element. It helps in organizing and controlling the width and behavior of columns in a grid layout.
Cols
We can specify the width of a column using the cols
prop. The value of cols
represents the number of grid columns that a column should occupy. By default, each column occupies 12 columns, which means that setting cols="6"
will make the column occupy half of the available width and so on.
There is also a further breakdown of the cols
prop; let's discuss that:
sm="6"
: This specifies that the column should span 6 columns on small screens and larger.
md="6"
: This specifies that the column should span 6 columns on medium screens and larger.
lg="6"
: This specifies that the column should span 6 columns on large screens.
xs="6"
: This specifies that the column should span 6 columns on extra-small screens.
xl="6"
: This specifies that the column should span 6 columns on extra-large screens.