Vuetify use CSS Grid classes
Tags: vuetify, vue, sass, nuxt
Published: 2022-03-08 01:14:21


Unfortunately [Vuetify.js](https://vuetifyjs.com/en/getting-started/installation/) still doesn’t use css grid, and from what I’ve found online on the topic, there’s only this [issue](https://github.com/vuetifyjs/vuetify/issues/6117), 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: Add CSS Grid classes

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_.

```
/**
 *
 * Display Grid
 *
 */

.d-grid
  display: grid

.d-inline-grid
  display: inline-grid

/**
 *
 * Grid Template Columns
 *
 */

.grid-cols-0
  grid-template-columns: none

@for $gtc from 1 through 12
  .grid-cols-#{$gtc}
    grid-template-columns: repeat(#{$gtc}, minmax(0, 1fr))

/**
 *
 * Grid Column
 *
 */

.col-auto
  grid-column: auto

@for $gc from 1 through 12
  .col-span-#{$gc}
    grid-column: span #{$gc} / span #{$gc}

/**
 *
 * Grid Column Start
 *
 */

.col-start-auto
  grid-column-start: auto

@for $gcs from 1 through 13
  .col-start-#{$gcs}
    grid-column-start: #{$gcs}

/**
 *
 * Grid Column End
 *
 */

.col-end-auto
  grid-column-end: auto

@for $gce from 1 through 13
  .col-end-#{$gce}
    grid-column-end: #{$gce}

/**
 *
 * Grid Template Rows
 *
 */

.grid-rows-0
  grid-template-rows: none

@for $gtr from 1 through 6
  .grid-rows-#{$gtr}
    grid-template-rows: repeat(#{$gtr}, minmax(0, 1fr))

/**
 *
 * Grid Row Span
 *
 */

.row-auto
  grid-row: auto

@for $gr from 1 through 6
  .row-span-#{$gr}
    grid-row: span #{$gr} / span #{$gr}

/**
 *
 * Grid Row Start
 *
 */

.row-start-auto
  grid-row-start: auto

@for $grs from 1 through 7
  .row-start-#{$grs}
    grid-row-start: #{$grs}

/**
 *
 * Grid Row End
 *
 */

.row-end-auto
  grid-row-end: auto

@for $gre from 1 through 7
  .row-end-#{$gre}
    grid-row-end: #{$gre}

/**
 *
 * Grid Auto Columns
 *
 */

.auto-cols-auto
  grid-auto-columns: auto

.auto-cols-min
  grid-auto-columns: min-content

.auto-cols-max
  grid-auto-columns: max-content

.auto-cols-fr
  grid-auto-columns: minmax(0, 1fr)

/**
 *
 * Grid Auto Rows
 *
 */

.auto-rows-auto
  grid-auto-rows: auto

.auto-rows-min
  grid-auto-rows: min-content

.auto-rows-max
  grid-auto-rows: max-content

.auto-rows-fr
  grid-auto-rows: minmax(0, 1fr)

/**
 *
 * Grid Auto Flow
 *
 */

.grid-flow-col
  grid-auto-flow: column

.grid-flow-col-dense
  grid-auto-flow: column dense

.grid-flow-row
  grid-auto-flow: row

.grid-flow-row-dense
  grid-auto-flow: row dense

/**
 *
 * Grid Gap
 *
 */

.gap-0
  gap: 0px

.gap-x-0
  column-gap: 0px

.gap-y-0
  row-gap: 0px

$gap: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96

@each $g in $gap
  .gap-#{$g}
    gap: calc(#{$g} * 0.25rem)

@each $cg in $gap
  .gap-x-#{$cg}
    column-gap: calc(#{$cg} * 0.25rem)

@each $rg in $gap
  .gap-y-#{$rg}
    row-gap: calc(#{$rg} * 0.25rem)
```

## 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. For Vue CLI this _~/sass/variables.scss_.

```
// details https://vuetifyjs.com/en/features/breakpoints/#thresholds

$grid-breakpoints: (
  'xs': 0,
  'sm': 600px,
  'md': 960px,
  'lg': 1264px,
  'xl': 1904px,
);
```

## 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.

```
/*=====  Start of Grid CSS  ======*/

@mixin mq($breakpoint)
  @if map-has-key($grid-breakpoints, $breakpoint)
    @media (min-width: #{map-get($grid-breakpoints, $breakpoint)})
      @if $breakpoint != xs

        .d-#{$breakpoint}-grid
          display: grid !important

        .d-#{$breakpoint}-inline-grid
          display: inline-grid !important

        @for $gtc from 1 through 12
          .grid-cols-#{$breakpoint}-#{$gtc}
            grid-template-columns: repeat(#{$gtc}, minmax(0, 1fr))

        @for $gc from 1 through 12
          .col-span-#{$breakpoint}-#{$gc}
            grid-column: span #{$gc} / span #{$gc}

        @for $gcs from 1 through 13
          .col-start-#{$breakpoint}-#{$gcs}
            grid-column-start: #{$gcs}

        @for $gce from 1 through 13
          .col-end-#{$breakpoint}-#{$gce}
            grid-column-end: #{$gce}

        @for $gtr from 1 through 6
          .grid-rows-#{$breakpoint}-#{$gtr}
            grid-template-rows: repeat(#{$gtr}, minmax(0, 1fr))

        @for $gr from 1 through 6
          .row-span-#{$breakpoint}-#{$gr}
            grid-row: span #{$gr} / span #{$gr}

        @for $grs from 1 through 7
          .row-start-#{$breakpoint}-#{$grs}
            grid-row-start: #{$grs}

        @for $gre from 1 through 7
          .row-end-#{$breakpoint}-#{$gre}
            grid-row-end: #{$gre}

        @each $g in $gap
          .gap-#{$breakpoint}-#{$g}
            gap: calc(#{$g} * 0.25rem)

        @each $cg in $gap
          .gap-x-#{$breakpoint}-#{$cg}
            column-gap: calc(#{$cg} * 0.25rem)

        @each $rg in $gap
          .gap-y-#{$breakpoint}-#{$rg}
            row-gap: calc(#{$rg} * 0.25rem)
```

## 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.

```
@mixin bg($breakpoint)
  @if map-has-key($grid-breakpoints, $breakpoint)
    @media (min-width: #{map-get($grid-breakpoints, $breakpoint)})
      @content

.v-main
  @include bg(xs)
    background: #fc5f5f !important
  @include bg(sm)
    background: #fcf05f !important
  @include bg(md)
    background: #90e89f !important
  @include bg(lg)
    background: #909be8 !important
  @include bg(xl)
    background: #ce90e8 !important
```

## Step 4: What to use

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

```
@include mq(sm)
@include mq(md)
@include mq(lg)
// @include mq(xl)
  
/*=====  End of Grid CSS  ======*/
```

To disable unnecessary queries, comment out excess lines.

## Nuxt

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

```
export default {
  css: [
    { src: '~/assets/sass/extends/vuetify-css-grid', lang: 'sass' },
  ],
}
```

---

It really works. To verify this, you can look at the [code on github](https://github.com/andrejsharapov/nuxt-app/blob/66756b44f30d76dd6f6d30e2ecffa1fb49ab45ab/pages/index.vue#L14) or look across the console on [the site](https://sharapov.dev/en/) (index page, screen #1).
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vw5aq3z8g90ah54qf1l.png)