Grid classes for Quasar framework - inspired from Tailwindcss

quasar-grid.sass

.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