-
-
Save steveclarke/fb6c2e0983bb884aaef53f8252a01d34 to your computer and use it in GitHub Desktop.
Grid classes for Quasar framework - inspired from Tailwindcss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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