Skip to content

Instantly share code, notes, and snippets.

Last active January 21, 2023 23:58
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Grid classes for Quasar framework - inspired from Tailwindcss
display: grid
// Grid template columns
grid-template-columns: repeat(1, minmax(0, 1fr))
grid-template-columns: repeat(2, minmax(0, 1fr))
grid-template-columns: repeat(3, minmax(0, 1fr))
grid-template-columns: repeat(4, minmax(0, 1fr))
grid-template-columns: repeat(5, minmax(0, 1fr))
grid-template-columns: repeat(6, minmax(0, 1fr))
grid-template-columns: repeat(7, minmax(0, 1fr))
grid-template-columns: repeat(8, minmax(0, 1fr))
grid-template-columns: repeat(9, minmax(0, 1fr))
grid-template-columns: repeat(10, minmax(0, 1fr))
grid-template-columns: repeat(11, minmax(0, 1fr))
grid-template-columns: repeat(12, minmax(0, 1fr))
grid-template-columns: none
grid-column: auto
// Grid column start/end
grid-column: auto
grid-column: span (1 / span) 1
grid-column: span (2 / span) 2
grid-column: span (3 / span) 3
grid-column: span (4 / span) 4
grid-column: span (5 / span) 5
grid-column: span (6 / span) 6
grid-column: span (7 / span) 7
grid-column: span (8 / span) 8
grid-column: span (9 / span) 9
grid-column: span (10 / span) 10
grid-column: span (11 / span) 11
grid-column: span (12 / span) 12
grid-column-start: 1
grid-column-start: 2
grid-column-start: 3
grid-column-start: 4
grid-column-start: 5
grid-column-start: 6
grid-column-start: 7
grid-column-start: 8
grid-column-start: 9
grid-column-start: 10
grid-column-start: 11
grid-column-start: 12
grid-column-start: 13
grid-column-start: auto
grid-column-end: 1
grid-column-end: 2
grid-column-end: 3
grid-column-end: 4
grid-column-end: 5
grid-column-end: 6
grid-column-end: 7
grid-column-end: 8
grid-column-end: 9
grid-column-end: 10
grid-column-end: 11
grid-column-end: 12
grid-column-end: 13
grid-column-end: auto
// Grid template rows
grid-template-rows: repeat(1, minmax(0, 1fr))
grid-template-rows: repeat(2, minmax(0, 1fr))
grid-template-rows: repeat(3, minmax(0, 1fr))
grid-template-rows: repeat(4, minmax(0, 1fr))
grid-template-rows: repeat(5, minmax(0, 1fr))
grid-template-rows: repeat(6, minmax(0, 1fr))
grid-template-rows: none
// Grid row start/end
grid-row: auto
grid-row: span (1 / span) 1
grid-row: span (2 / span) 2
grid-row: span (3 / span) 3
grid-row: span (4 / span) 4
grid-row: span (5 / span) 5
grid-row: span (6 / span) 6
grid-row-start: 1
grid-row-start: 2
grid-row-start: 3
grid-row-start: 4
grid-row-start: 5
grid-row-start: 6
grid-row-start: 7
grid-row-start: auto
grid-row-end: 1
grid-row-end: 2
grid-row-end: 3
grid-row-end: 4
grid-row-end: 5
grid-row-end: 6
grid-row-end: 7
grid-row-end: auto
// Grid gap
gap: 0
gap: 0.25rem
gap: 0.5rem
gap: 0.75rem
gap: 1rem
gap: 1.25rem
gap: 1.5rem
gap: 2rem
gap: 2.5rem
gap: 3rem
gap: 4rem
gap: 5rem
gap: 6rem
gap: 8rem
gap: 10rem
gap: 12rem
gap: 14rem
gap: 16rem
gap: 1px
row-gap: 0
row-gap: 0.25rem
row-gap: 0.5rem
row-gap: 0.75rem
row-gap: 1rem
row-gap: 1.25rem
row-gap: 1.5rem
row-gap: 2rem
row-gap: 2.5rem
row-gap: 3rem
row-gap: 4rem
row-gap: 5rem
row-gap: 6rem
row-gap: 8rem
row-gap: 10rem
row-gap: 12rem
row-gap: 14rem
row-gap: 16rem
row-gap: 1px
column-gap: 0
column-gap: 0.25rem
column-gap: 0.5rem
column-gap: 0.75rem
column-gap: 1rem
column-gap: 1.25rem
column-gap: 1.5rem
column-gap: 2rem
column-gap: 2.5rem
column-gap: 3rem
column-gap: 4rem
column-gap: 5rem
column-gap: 6rem
column-gap: 8rem
column-gap: 10rem
column-gap: 12rem
column-gap: 14rem
column-gap: 16rem
column-gap: 1px
// Grid auto flow
grid-auto-flow: row
grid-auto-flow: column
grid-auto-flow: row dense
grid-auto-flow: column dense
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment