DEV Community

Cover image for Vuetify use CSS Grid classes
Andrej Sharapov
Andrej Sharapov

Posted on

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: 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)
Enter fullscreen mode Exit fullscreen mode

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,
);
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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  ======*/
Enter fullscreen mode Exit fullscreen mode

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' },
  ],
}
Enter fullscreen mode Exit fullscreen mode

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).
Image description

Top comments (0)