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)
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 or look across the console on the site (index page, screen #1).
Top comments (0)