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:

  • 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:

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

npm install vuetify
  1. 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.

   ¨( @ ƒ¸Aƒ¸Aƒ¸Aƒ¸Aƒ¸Aƒ¸Aƒ¸A3ƒ¸A3ƒ¸Aƒ¸Aƒ¸Aƒ¸Aƒ¸A±ƒ¸A±ƒ¸Aƒ¸Aƒ¸Aƒ¸Aƒ¸AZƒ¸A÷ƒ¸A÷ƒ¸AZƒ¸Aƒ¸Aƒ¸Aƒ¸Aƒ¸AɃ¸Aÿƒ¸Aÿƒ¸AɃ¸Aƒ¸Aƒ¸Aƒ¸Aƒ¸Azƒ¸Aþƒ¸Aÿƒ¸Aÿƒ¸Aþƒ¸Azƒ¸Aƒ¸Aƒ¸Aƒ¸Aƒ¸A.ƒ¸A߃¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸A߃¸A.ƒ¸Aƒ¸Aƒ¸Aƒ¸Aƒ¸Ašƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Ašƒ¸Aƒ¸Aƒ¸Aƒ¸Aƒ¸AHƒ¸Aðƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aðƒ¸AHƒ¸Aƒ¸Aƒ¸Aƒ¸Aƒ¸A¸ƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸A¸ƒ¸Aƒ¸Aƒ¸Aƒ¸Aƒ¸Afƒ¸Aúƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aúƒ¸Afƒ¸Aƒ¸Aƒ¸Aƒ¸A ƒ¸A҃¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¹Aÿƒ¹Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸A҃¸A ƒ¸Aƒ¸Aƒ¸Aƒ¸A†ƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¹Aÿ|¤?ÿ|¤?ÿƒ¹Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸A†ƒ¸Aƒ¸Aƒ¸Aƒ¸Aƒ¸A7ƒ¸A惸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿ‚´Aÿjl9ÿjl9ÿ‚´Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸A惸A7ƒ¸Aƒ¸Aƒ¸Aƒ¸A	ƒ¸A¦ƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¹Aÿw“=ÿ_L5ÿ_L5ÿw“=ÿƒ¹Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸A¦ƒ¸A	ƒ¸Aƒ¸Aƒ¸Aƒ¸ARƒ¸Aôƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¹Aÿ€®@ÿfa8ÿ^H5ÿ^H5ÿfa8ÿ€®@ÿƒ¹Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aôƒ¸ARƒ¸Aƒ¸Aƒ¸Aƒ¸Aƒ¸Aƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¹Aÿr…<ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿr…<ÿƒ¹Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aƒ¸Aƒ¸Aƒ¸Aƒ¸Aƒ¸Aqƒ¸Aüƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¹Aÿ}¦?ÿcW7ÿ^H5ÿ^I5ÿ^I5ÿ^H5ÿcW7ÿ}¦?ÿƒ¹Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aüƒ¸Aqƒ¸Aƒ¸Aƒ¸Aƒ¸A(ƒ¸Aڃ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ·Aÿmv:ÿ^H5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ^H5ÿmv:ÿƒ·Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aڃ¸A(ƒ¸Aƒ¸Aƒ¸Aƒ¸A’ƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¹Aÿy›>ÿ`P6ÿ^H5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ^H5ÿ`P6ÿy›>ÿƒ¹Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸A’ƒ¸Aƒ¸Aƒ¸Aƒ¸Aƒ¸A@ƒ¸A샸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿ²@ÿii9ÿ]G5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ]G5ÿii9ÿ²@ÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸A샸A@ƒ¸Aƒ¸Aƒ¸Aƒ¸A
ƒ¸A±ƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¹AÿuŽ=ÿ_K5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ_K5ÿuŽ=ÿƒ¹Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸A±ƒ¸A
ƒ¸Aƒ¸Aƒ¸Aƒ¸A]ƒ¸Aøƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¹Aÿ¬@ÿe]7ÿ^H5ÿ^I5ÿ^I5ÿ^I5ÿ^J5å^J5å^I5ÿ^I5ÿ^I5ÿ^H5ÿe]7ÿ¬@ÿƒ¹Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aøƒ¸A]ƒ¸Aƒ¸Aƒ¸Aƒ¸Aƒ¸Ã¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿp;ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ü_L5n_L5n^I5ü^I5ÿ^I5ÿ^I5ÿ^I5ÿp;ÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Ã¸Aƒ¸Aƒ¸Aƒ¸Aƒ¸A}ƒ¸Aþƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¹Aÿ|¢?ÿbT6ÿ^H5ÿ^I5ÿ^I5ÿ^I5ÿ_J5ÁaP6aP6_J5Á^I5ÿ^I5ÿ^I5ÿ^H5ÿbT6ÿ|¢?ÿƒ¹Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aþƒ¸A}ƒ¸Aƒ¸Aƒ¸Aƒ¸A/ƒ¸AჸAÿƒ¸Aÿƒ¸Aÿƒ¸Aÿ‚µAÿlq9ÿ^H5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ó_L5P^H5^H5_L5P^I5ó^I5ÿ^I5ÿ^I5ÿ^H5ÿlq9ÿ‚µAÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸AჸA/ƒ¸Aƒ¸Aƒ¸Aœƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿ„ºAÿx–=ÿ`N6ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ_K5¤bT7aQ6aQ6bT7_K5¤^I5ÿ^I5ÿ^I5ÿ^I5ÿ`N6ÿx–=ÿ„ºAÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aœƒ¸Aƒ¸AWƒ¸Aðƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¹Aÿ€¯@ÿgd8ÿ^H5ÿ^I5ÿ^I5ÿ^I5ÿ^J5å`M65_K5jf9jf9_K5`M65^J5å^I5ÿ^I5ÿ^I5ÿ^H5ÿgd8ÿ€¯@ÿƒ¹Aÿƒ¸Aÿƒ¸Aÿƒ¸Aÿƒ¸Aðƒ¸AWƒ¸Ašƒ¸Aȃ¸Aƃ¸Aƃ¸AƄºAÆv‘=Æ_K5Æ^I5Æ^I5Æ^I5Æ^I5É_K5uha9bS7bS7ha9_K5u^I5É^I5Æ^I5Æ^I5Æ_K5Æv‘=ƄºAƃ¸Aƃ¸Aƃ¸Aƃ¸Aȃ¸Ašƒ¸Aƒ¸A
ƒ¸A
ƒ¸A
ƒ¸A
ƒ¹A
lr:
\D4
^I5
^I5
^I5
^I5
`M6^H5^H5`M6^I5
^I5
^I5
^I5
\D4
lr9
ƒ¹A
ƒ¸A
ƒ¸A
ƒ¸A
ƒ¸A
ƒ¸Aÿÿÿÿÿÿÿÿÿþÿÿü?ÿÿü?ÿÿøÿÿøÿÿðÿÿàÿÿàÿÿÀÿÿÀÿÿ€ÿÿÿÿÿþþü?ü?øððààÀÀ€€€ÀÀàÿÿÿÿ
Responsive grid with three and four columns

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:

Breakpoint

Screen Size

xs

less than 600px

sm

600px to 959px

md

960px to 1263px

lg

1264px to 1903px

xl

1904px and above

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

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved