Creating a basic responsive layout using Vuetify's grid system

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:

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:

1. Install Vuetify in our VueJs project using the following command:

2. Import Vuetify and its CSS in your main application file, i.e., main.js.

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.

By defining different values for the cols prop at different breakpoints, we create a responsive layout. On medium screens, the columns will stack vertically, each occupying the full width of the screen (12 columns). On small screens, the columns will be displayed side by side, each occupying 6 columns. On large screens, each grid column will occupy 4 columns.

By clicking on the link as shown in the following image, we can see the changes mentioned in the above paragraph:

Following are the screen sizes associated with each breakpoint in Vuetify's grid system:

Note: We are using Vuetify 3.0 version in this Answer.