Skip to content

Instantly share code, notes, and snippets.

@steveclarke
Forked from yoyosan/quasar-grid.sass
Created October 11, 2023 15:46
Show Gist options
  • Save steveclarke/fb6c2e0983bb884aaef53f8252a01d34 to your computer and use it in GitHub Desktop.
Save steveclarke/fb6c2e0983bb884aaef53f8252a01d34 to your computer and use it in GitHub Desktop.
Grid classes for Quasar framework - inspired from Tailwindcss
.grid
display: grid
// Grid template columns
.grid-cols-1
grid-template-columns: repeat(1, minmax(0, 1fr))
.grid-cols-2
grid-template-columns: repeat(2, minmax(0, 1fr))
.grid-cols-3
grid-template-columns: repeat(3, minmax(0, 1fr))
.grid-cols-4
grid-template-columns: repeat(4, minmax(0, 1fr))
.grid-cols-5
grid-template-columns: repeat(5, minmax(0, 1fr))
.grid-cols-6
grid-template-columns: repeat(6, minmax(0, 1fr))
.grid-cols-7
grid-template-columns: repeat(7, minmax(0, 1fr))
.grid-cols-8
grid-template-columns: repeat(8, minmax(0, 1fr))
.grid-cols-9
grid-template-columns: repeat(9, minmax(0, 1fr))
.grid-cols-10
grid-template-columns: repeat(10, minmax(0, 1fr))
.grid-cols-11
grid-template-columns: repeat(11, minmax(0, 1fr))
.grid-cols-12
grid-template-columns: repeat(12, minmax(0, 1fr))
.grid-cols-none
grid-template-columns: none
.grid-col-auto
grid-column: auto
// Grid column start/end
.grid-col-auto
grid-column: auto
.grid-col-span-1
grid-column: span (1 / span) 1
.grid-col-span-2
grid-column: span (2 / span) 2
.grid-col-span-3
grid-column: span (3 / span) 3
.grid-col-span-4
grid-column: span (4 / span) 4
.grid-col-span-5
grid-column: span (5 / span) 5
.grid-col-span-6
grid-column: span (6 / span) 6
.grid-col-span-7
grid-column: span (7 / span) 7
.grid-col-span-8
grid-column: span (8 / span) 8
.grid-col-span-9
grid-column: span (9 / span) 9
.grid-col-span-10
grid-column: span (10 / span) 10
.grid-col-span-11
grid-column: span (11 / span) 11
.grid-col-span-12
grid-column: span (12 / span) 12
.grid-col-start-1
grid-column-start: 1
.grid-col-start-2
grid-column-start: 2
.grid-col-start-3
grid-column-start: 3
.grid-col-start-4
grid-column-start: 4
.grid-col-start-5
grid-column-start: 5
.grid-col-start-6
grid-column-start: 6
.grid-col-start-7
grid-column-start: 7
.grid-col-start-8
grid-column-start: 8
.grid-col-start-9
grid-column-start: 9
.grid-col-start-10
grid-column-start: 10
.grid-col-start-11
grid-column-start: 11
.grid-col-start-12
grid-column-start: 12
.grid-col-start-13
grid-column-start: 13
.grid-col-start-auto
grid-column-start: auto
.grid-col-end-1
grid-column-end: 1
.grid-col-end-2
grid-column-end: 2
.grid-col-end-3
grid-column-end: 3
.grid-col-end-4
grid-column-end: 4
.grid-col-end-5
grid-column-end: 5
.grid-col-end-6
grid-column-end: 6
.grid-col-end-7
grid-column-end: 7
.grid-col-end-8
grid-column-end: 8
.grid-col-end-9
grid-column-end: 9
.grid-col-end-10
grid-column-end: 10
.grid-col-end-11
grid-column-end: 11
.grid-col-end-12
grid-column-end: 12
.grid-col-end-13
grid-column-end: 13
.grid-col-end-auto
grid-column-end: auto
// Grid template rows
.grid-rows-1
grid-template-rows: repeat(1, minmax(0, 1fr))
.grid-rows-2
grid-template-rows: repeat(2, minmax(0, 1fr))
.grid-rows-3
grid-template-rows: repeat(3, minmax(0, 1fr))
.grid-rows-4
grid-template-rows: repeat(4, minmax(0, 1fr))
.grid-rows-5
grid-template-rows: repeat(5, minmax(0, 1fr))
.grid-rows-6
grid-template-rows: repeat(6, minmax(0, 1fr))
.grid-rows-none
grid-template-rows: none
// Grid row start/end
.grid-row-auto
grid-row: auto
.grid-row-span-1
grid-row: span (1 / span) 1
.grid-row-span-2
grid-row: span (2 / span) 2
.grid-row-span-3
grid-row: span (3 / span) 3
.grid-row-span-4
grid-row: span (4 / span) 4
.grid-row-span-5
grid-row: span (5 / span) 5
.grid-row-span-6
grid-row: span (6 / span) 6
.grid-row-start-1
grid-row-start: 1
.grid-row-start-2
grid-row-start: 2
.grid-row-start-3
grid-row-start: 3
.grid-row-start-4
grid-row-start: 4
.grid-row-start-5
grid-row-start: 5
.grid-row-start-6
grid-row-start: 6
.grid-row-start-7
grid-row-start: 7
.grid-row-start-auto
grid-row-start: auto
.grid-row-end-1
grid-row-end: 1
.grid-row-end-2
grid-row-end: 2
.grid-row-end-3
grid-row-end: 3
.grid-row-end-4
grid-row-end: 4
.grid-row-end-5
grid-row-end: 5
.grid-row-end-6
grid-row-end: 6
.grid-row-end-7
grid-row-end: 7
.grid-row-end-auto
grid-row-end: auto
// Grid gap
.grid-gap-0
gap: 0
.grid-gap-1
gap: 0.25rem
.grid-gap-2
gap: 0.5rem
.grid-gap-3
gap: 0.75rem
.grid-gap-4
gap: 1rem
.grid-gap-5
gap: 1.25rem
.grid-gap-6
gap: 1.5rem
.grid-gap-8
gap: 2rem
.grid-gap-10
gap: 2.5rem
.grid-gap-12
gap: 3rem
.grid-gap-16
gap: 4rem
.grid-gap-20
gap: 5rem
.grid-gap-24
gap: 6rem
.grid-gap-32
gap: 8rem
.grid-gap-40
gap: 10rem
.grid-gap-48
gap: 12rem
.grid-gap-56
gap: 14rem
.grid-gap-64
gap: 16rem
.grid-gap-px
gap: 1px
.grid-row-gap-0
row-gap: 0
.grid-row-gap-1
row-gap: 0.25rem
.grid-row-gap-2
row-gap: 0.5rem
.grid-row-gap-3
row-gap: 0.75rem
.grid-row-gap-4
row-gap: 1rem
.grid-row-gap-5
row-gap: 1.25rem
.grid-row-gap-6
row-gap: 1.5rem
.grid-row-gap-8
row-gap: 2rem
.grid-row-gap-10
row-gap: 2.5rem
.grid-row-gap-12
row-gap: 3rem
.grid-row-gap-16
row-gap: 4rem
.grid-row-gap-20
row-gap: 5rem
.grid-row-gap-24
row-gap: 6rem
.grid-row-gap-32
row-gap: 8rem
.grid-row-gap-40
row-gap: 10rem
.grid-row-gap-48
row-gap: 12rem
.grid-row-gap-56
row-gap: 14rem
.grid-row-gap-64
row-gap: 16rem
.grid-row-gap-px
row-gap: 1px
.grid-col-gap-0
column-gap: 0
.grid-col-gap-1
column-gap: 0.25rem
.grid-col-gap-2
column-gap: 0.5rem
.grid-col-gap-3
column-gap: 0.75rem
.grid-col-gap-4
column-gap: 1rem
.grid-col-gap-5
column-gap: 1.25rem
.grid-col-gap-6
column-gap: 1.5rem
.grid-col-gap-8
column-gap: 2rem
.grid-col-gap-10
column-gap: 2.5rem
.grid-col-gap-12
column-gap: 3rem
.grid-col-gap-16
column-gap: 4rem
.grid-col-gap-20
column-gap: 5rem
.grid-col-gap-24
column-gap: 6rem
.grid-col-gap-32
column-gap: 8rem
.grid-col-gap-40
column-gap: 10rem
.grid-col-gap-48
column-gap: 12rem
.grid-col-gap-56
column-gap: 14rem
.grid-col-gap-64
column-gap: 16rem
.grid-col-gap-px
column-gap: 1px
// Grid auto flow
.grid-flow-row
grid-auto-flow: row
.grid-flow-col
grid-auto-flow: column
.grid-flow-row-dense
grid-auto-flow: row dense
.grid-flow-col-dense
grid-auto-flow: column dense
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment