How to use Vuetify grid system

Posted on: January 08, 2022 by Deven

In this article, you are going to learn about Vuetify grid system.

Vuetify grid system is a very useful resource to make your web application responsive. It is used extensively for creating specific layouts. It comes with a 12 point grid system using flexbox. You can target specific media screen sizes with the help of its media breakpoints. It provides 5 types of media breakpoints are – xs, sm, md. lg, xl where xs refers to the extra small screen size that is less than 600px, sm refers to the small screen size that is greater than 600px but not more than 960px. md is used for the medium screen which screen limits is in between 960px > – < 1264px and lg refers to the large screen with a screen limit is in between 1264px > – < 1904px. Finally xl refers to the extra-large screen and the screen size is greater than 1904px.

I assume that you have already known about some basics of CSS and bootstrap. If you have knowledge about the bootstrap grid system then the vuetify grid system will be easy for you because it is heavily inspired by the bootstrap grid. Let’s an example of vuetify grid:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="<https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900>" rel="stylesheet">
    <link href="<https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css>" rel="stylesheet">
    <link href="<https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css>" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  </head>
  <title>Vuetify Grid</title>
  <body>
    <div id="app">
      <v-app>
        <v-main>
          <v-container>
            <v-layout row>
              <v-flex md-6>
                <v-btn outline block class="warning">1</v-btn>
              </v-flex>
              <v-flex md-6>
                <v-btn outline block class="primary">2</v-btn>
              </v-flex>
            </v-layout>
          </v-container>
        </v-main>
      </v-app>
    </div>
  
    <script src="<https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js>"></script>
    <script src="<https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js>"></script>
        </body>
</html>

VueJS:

new Vue({
        el: '#app',
        vuetify: new Vuetify(),
    })

We use vuetify in our app and wrapped it into an HTML script tag. You may create a separate file for this.

Output:

You can see that we divided our screen size into two parts. If you want you may divide it into 12 points or any parts that make the sum of 12. Lets see another example where we will divide it into 4 parts.

<v-container>
      <v-layout row>
        <v-flex md-3>
          <v-btn outline block class="primary">1</v-btn>
        </v-flex>
        <v-flex md-3>
          <v-btn outline block class="warning">2</v-btn>
        </v-flex>
        <v-flex md-3>
            <v-btn outline block class="primary">3</v-btn>
        </v-flex>
        <v-flex md-3>
          <v-btn outline block class="warning">4</v-btn>
        </v-flex>
     </v-layout>
 </v-container>

Output:

You can add more layouts based on your application need by following this approach. Vuetify grid system is a large content itself but the process of creating it is almost the same. From this article, you may get a basic idea of how to use vuetify grid system now to do more advanced things you need to practice and follow the official documentation of vuetify to grab all the things.

How to use Vuetify grid system

Related Posts:

category :

tag :

Share on social media