Vuetify use CSS Grid classes

Unfortunately Vuetify.js still doesn’t use css grid, and from what I’ve found online on the topic, there’s only this issue, which was closed for inactivity.

I want to offer this styles to anyone who wants to work with vuetify.js and grid CSS together. It may seem complicated and confusing, but if you follow the instructions, you will succeed.

Step 1: Added CSS Grid

You can add the styles file to the folder from which they will be used. I am using nuxt so my file location is ~/assets/sass/extends/css-grid.sass.

Step 2: Variables

If you want media queries to work for you the same way they do for other classes like `-md- or -lg-`, then the first thing you need to do is defined breakpoints in your variables file.

Step 3: Media queries

Next, you need to add the mixin to the very top of the vuetify-css-grid.sass file you’ve already created.

Step 4: What to use

Then, at the very bottom, add the breakpoints you will use.

To disable unnecessary queries, comment out excess lines.

Tests

To make sure queries work as expected, try adding this mixin to your application’s main class. Since I’m using nuxt, I’ve added requests to the `v-main` of my app.

Nuxt

If you’re using nuxt like I am, you can add styles to the nuxt.config file.

It really works. To verify this, you can look at the code on github or look across the console on the site (index page, screen #1).